<!DOCTYPE html>
<html lang="" xml:lang="">
<head>

  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>第 33 章 JavaScript 变量类型 | 前端开发2020版</title>
  <meta name="description" content="掌握前端开发的基础知识" />
  <meta name="generator" content="bookdown 0.17.2 and GitBook 2.6.7" />

  <meta property="og:title" content="第 33 章 JavaScript 变量类型 | 前端开发2020版" />
  <meta property="og:type" content="book" />
  
  
  <meta property="og:description" content="掌握前端开发的基础知识" />
  <meta name="github-repo" content="yangjh-xbmu/front-end" />

  <meta name="twitter:card" content="summary" />
  <meta name="twitter:title" content="第 33 章 JavaScript 变量类型 | 前端开发2020版" />
  
  <meta name="twitter:description" content="掌握前端开发的基础知识" />
  

<meta name="author" content="杨志宏" />



  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  
  
<link rel="prev" href="语句和声明.html"/>
<link rel="next" href="全局对象.html"/>
<script src="libs/jquery-2.2.3/jquery.min.js"></script>
<link href="libs/gitbook-2.6.7/css/style.css" rel="stylesheet" />
<link href="libs/gitbook-2.6.7/css/plugin-table.css" rel="stylesheet" />
<link href="libs/gitbook-2.6.7/css/plugin-bookdown.css" rel="stylesheet" />
<link href="libs/gitbook-2.6.7/css/plugin-highlight.css" rel="stylesheet" />
<link href="libs/gitbook-2.6.7/css/plugin-search.css" rel="stylesheet" />
<link href="libs/gitbook-2.6.7/css/plugin-fontsettings.css" rel="stylesheet" />
<link href="libs/gitbook-2.6.7/css/plugin-clipboard.css" rel="stylesheet" />











<style type="text/css">
code.sourceCode > span { display: inline-block; line-height: 1.25; }
code.sourceCode > span { color: inherit; text-decoration: inherit; }
code.sourceCode > span:empty { height: 1.2em; }
.sourceCode { overflow: visible; }
code.sourceCode { white-space: pre; position: relative; }
pre.sourceCode { margin: 0; }
@media screen {
div.sourceCode { overflow: auto; }
}
@media print {
code.sourceCode { white-space: pre-wrap; }
code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
}
pre.numberSource code
  { counter-reset: source-line 0; }
pre.numberSource code > span
  { position: relative; left: -4em; counter-increment: source-line; }
pre.numberSource code > span > a:first-child::before
  { content: counter(source-line);
    position: relative; left: -1em; text-align: right; vertical-align: baseline;
    border: none; display: inline-block;
    -webkit-touch-callout: none; -webkit-user-select: none;
    -khtml-user-select: none; -moz-user-select: none;
    -ms-user-select: none; user-select: none;
    padding: 0 4px; width: 4em;
    color: #aaaaaa;
  }
pre.numberSource { margin-left: 3em; border-left: 1px solid #aaaaaa;  padding-left: 4px; }
div.sourceCode
  {   }
@media screen {
code.sourceCode > span > a:first-child::before { text-decoration: underline; }
}
code span.al { color: #ff0000; font-weight: bold; } /* Alert */
code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
code span.at { color: #7d9029; } /* Attribute */
code span.bn { color: #40a070; } /* BaseN */
code span.bu { } /* BuiltIn */
code span.cf { color: #007020; font-weight: bold; } /* ControlFlow */
code span.ch { color: #4070a0; } /* Char */
code span.cn { color: #880000; } /* Constant */
code span.co { color: #60a0b0; font-style: italic; } /* Comment */
code span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */
code span.do { color: #ba2121; font-style: italic; } /* Documentation */
code span.dt { color: #902000; } /* DataType */
code span.dv { color: #40a070; } /* DecVal */
code span.er { color: #ff0000; font-weight: bold; } /* Error */
code span.ex { } /* Extension */
code span.fl { color: #40a070; } /* Float */
code span.fu { color: #06287e; } /* Function */
code span.im { } /* Import */
code span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */
code span.kw { color: #007020; font-weight: bold; } /* Keyword */
code span.op { color: #666666; } /* Operator */
code span.ot { color: #007020; } /* Other */
code span.pp { color: #bc7a00; } /* Preprocessor */
code span.sc { color: #4070a0; } /* SpecialChar */
code span.ss { color: #bb6688; } /* SpecialString */
code span.st { color: #4070a0; } /* String */
code span.va { color: #19177c; } /* Variable */
code span.vs { color: #4070a0; } /* VerbatimString */
code span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */
</style>

<link rel="stylesheet" href="css\style.css" type="text/css" />
</head>

<body>



  <div class="book without-animation with-summary font-size-2 font-family-1" data-basepath=".">

    <div class="book-summary">
      <nav role="navigation">

<ul class="summary">
<li><a href="./">front-end</a></li>

<li class="divider"></li>
<li class="chapter" data-level="" data-path="index.html"><a href="index.html"><i class="fa fa-check"></i>前言</a><ul>
<li class="chapter" data-level="0.1" data-path="index.html"><a href="index.html#什么是前端网络开发"><i class="fa fa-check"></i><b>0.1</b> 什么是前端网络开发</a></li>
<li class="chapter" data-level="0.2" data-path="index.html"><a href="index.html#本书的特点"><i class="fa fa-check"></i><b>0.2</b> 本书的特点</a></li>
<li class="chapter" data-level="0.3" data-path="index.html"><a href="index.html#本书的目标"><i class="fa fa-check"></i><b>0.3</b> 本书的目标</a></li>
<li class="chapter" data-level="0.4" data-path="index.html"><a href="index.html#在线阅读地址"><i class="fa fa-check"></i><b>0.4</b> 在线阅读地址</a></li>
<li class="chapter" data-level="0.5" data-path="index.html"><a href="index.html#学习资源"><i class="fa fa-check"></i><b>0.5</b> 学习资源</a><ul>
<li class="chapter" data-level="0.5.1" data-path="index.html"><a href="index.html#国外课程"><i class="fa fa-check"></i><b>0.5.1</b> 国外课程</a></li>
<li class="chapter" data-level="0.5.2" data-path="index.html"><a href="index.html#行业导航"><i class="fa fa-check"></i><b>0.5.2</b> 行业导航</a></li>
<li class="chapter" data-level="0.5.3" data-path="index.html"><a href="index.html#技术社区"><i class="fa fa-check"></i><b>0.5.3</b> 技术社区</a></li>
<li class="chapter" data-level="0.5.4" data-path="index.html"><a href="index.html#技术专家博客"><i class="fa fa-check"></i><b>0.5.4</b> 技术专家博客</a></li>
<li class="chapter" data-level="0.5.5" data-path="index.html"><a href="index.html#html"><i class="fa fa-check"></i><b>0.5.5</b> HTML</a></li>
<li class="chapter" data-level="0.5.6" data-path="index.html"><a href="index.html#css"><i class="fa fa-check"></i><b>0.5.6</b> CSS</a></li>
<li class="chapter" data-level="0.5.7" data-path="index.html"><a href="index.html#ui框架"><i class="fa fa-check"></i><b>0.5.7</b> UI框架</a></li>
<li class="chapter" data-level="0.5.8" data-path="index.html"><a href="index.html#javascript"><i class="fa fa-check"></i><b>0.5.8</b> JavaScript</a></li>
<li class="chapter" data-level="0.5.9" data-path="index.html"><a href="index.html#前端兼职"><i class="fa fa-check"></i><b>0.5.9</b> 前端兼职</a></li>
<li class="chapter" data-level="0.5.10" data-path="index.html"><a href="index.html#工具"><i class="fa fa-check"></i><b>0.5.10</b> 工具</a></li>
<li class="chapter" data-level="0.5.11" data-path="index.html"><a href="index.html#前端框架"><i class="fa fa-check"></i><b>0.5.11</b> 前端框架</a></li>
<li class="chapter" data-level="0.5.12" data-path="index.html"><a href="index.html#作品赏析"><i class="fa fa-check"></i><b>0.5.12</b> 作品赏析</a></li>
</ul></li>
</ul></li>
<li class="part"><span><b>I HTML</b></span></li>
<li class="chapter" data-level="1" data-path="html-histroy.html"><a href="html-histroy.html"><i class="fa fa-check"></i><b>1</b> HTML 简介</a><ul>
<li class="chapter" data-level="1.1" data-path="html-histroy.html"><a href="html-histroy.html#html-发展简史"><i class="fa fa-check"></i><b>1.1</b> HTML 发展简史</a></li>
<li class="chapter" data-level="1.2" data-path="html-histroy.html"><a href="html-histroy.html#在线学习资源及工具"><i class="fa fa-check"></i><b>1.2</b> 在线学习资源及工具</a></li>
<li class="chapter" data-level="1.3" data-path="html-histroy.html"><a href="html-histroy.html#扩展阅读资料"><i class="fa fa-check"></i><b>1.3</b> 扩展阅读资料</a></li>
</ul></li>
<li class="chapter" data-level="2" data-path="web-standard.html"><a href="web-standard.html"><i class="fa fa-check"></i><b>2</b> Web 标准</a><ul>
<li class="chapter" data-level="2.1" data-path="web-standard.html"><a href="web-standard.html#web-标准产生背景"><i class="fa fa-check"></i><b>2.1</b> Web 标准产生背景</a></li>
<li class="chapter" data-level="2.2" data-path="web-standard.html"><a href="web-standard.html#web-标准的内容"><i class="fa fa-check"></i><b>2.2</b> Web 标准的内容</a></li>
<li class="chapter" data-level="2.3" data-path="web-standard.html"><a href="web-standard.html#扩展阅读材料"><i class="fa fa-check"></i><b>2.3</b> 扩展阅读材料</a></li>
</ul></li>
<li class="chapter" data-level="3" data-path="html-term.html"><a href="html-term.html"><i class="fa fa-check"></i><b>3</b> HTML 基础概念及规则</a><ul>
<li class="chapter" data-level="3.1" data-path="html-term.html"><a href="html-term.html#html-基本结构"><i class="fa fa-check"></i><b>3.1</b> HTML 基本结构</a></li>
<li class="chapter" data-level="3.2" data-path="html-term.html"><a href="html-term.html#元素及标签"><i class="fa fa-check"></i><b>3.2</b> 元素及标签</a></li>
<li class="chapter" data-level="3.3" data-path="html-term.html"><a href="html-term.html#属性及属性值"><i class="fa fa-check"></i><b>3.3</b> 属性及属性值</a></li>
<li class="chapter" data-level="3.4" data-path="html-term.html"><a href="html-term.html#特殊字符"><i class="fa fa-check"></i><b>3.4</b> 特殊字符</a></li>
<li class="chapter" data-level="3.5" data-path="html-term.html"><a href="html-term.html#扩展阅读资料-1"><i class="fa fa-check"></i><b>3.5</b> 扩展阅读资料</a></li>
</ul></li>
<li class="chapter" data-level="4" data-path="htmlelement.html"><a href="htmlelement.html"><i class="fa fa-check"></i><b>4</b> <code>html</code>元素</a></li>
<li class="chapter" data-level="5" data-path="html-meta.html"><a href="html-meta.html"><i class="fa fa-check"></i><b>5</b> 文档元数据相关元素</a><ul>
<li class="chapter" data-level="5.1" data-path="html-meta.html"><a href="html-meta.html#head"><i class="fa fa-check"></i><b>5.1</b> head</a></li>
<li class="chapter" data-level="5.2" data-path="html-meta.html"><a href="html-meta.html#title"><i class="fa fa-check"></i><b>5.2</b> title</a></li>
<li class="chapter" data-level="5.3" data-path="html-meta.html"><a href="html-meta.html#base"><i class="fa fa-check"></i><b>5.3</b> base</a></li>
<li class="chapter" data-level="5.4" data-path="html-meta.html"><a href="html-meta.html#link"><i class="fa fa-check"></i><b>5.4</b> link</a></li>
<li class="chapter" data-level="5.5" data-path="html-meta.html"><a href="html-meta.html#meta"><i class="fa fa-check"></i><b>5.5</b> meta</a></li>
<li class="chapter" data-level="5.6" data-path="html-meta.html"><a href="html-meta.html#style"><i class="fa fa-check"></i><b>5.6</b> style</a></li>
<li class="chapter" data-level="5.7" data-path="html-meta.html"><a href="html-meta.html#扩展阅读资料-2"><i class="fa fa-check"></i><b>5.7</b> 扩展阅读资料</a></li>
</ul></li>
<li class="chapter" data-level="6" data-path="html-sections.html"><a href="html-sections.html"><i class="fa fa-check"></i><b>6</b> 区块元素</a><ul>
<li class="chapter" data-level="6.1" data-path="html-sections.html"><a href="html-sections.html#块元素与行内元素"><i class="fa fa-check"></i><b>6.1</b> 块元素与行内元素</a></li>
<li class="chapter" data-level="6.2" data-path="html-sections.html"><a href="html-sections.html#区块元素"><i class="fa fa-check"></i><b>6.2</b> 区块元素</a><ul>
<li class="chapter" data-level="6.2.1" data-path="html-sections.html"><a href="html-sections.html#body"><i class="fa fa-check"></i><b>6.2.1</b> body</a></li>
<li class="chapter" data-level="6.2.2" data-path="html-sections.html"><a href="html-sections.html#article"><i class="fa fa-check"></i><b>6.2.2</b> article</a></li>
<li class="chapter" data-level="6.2.3" data-path="html-sections.html"><a href="html-sections.html#section"><i class="fa fa-check"></i><b>6.2.3</b> section</a></li>
<li class="chapter" data-level="6.2.4" data-path="html-sections.html"><a href="html-sections.html#nav"><i class="fa fa-check"></i><b>6.2.4</b> nav</a></li>
<li class="chapter" data-level="6.2.5" data-path="html-sections.html"><a href="html-sections.html#aside"><i class="fa fa-check"></i><b>6.2.5</b> aside</a></li>
<li class="chapter" data-level="6.2.6" data-path="html-sections.html"><a href="html-sections.html#h1h2h6"><i class="fa fa-check"></i><b>6.2.6</b> h1,h2,…h6</a></li>
<li class="chapter" data-level="6.2.7" data-path="html-sections.html"><a href="html-sections.html#header"><i class="fa fa-check"></i><b>6.2.7</b> header</a></li>
<li class="chapter" data-level="6.2.8" data-path="html-sections.html"><a href="html-sections.html#footer"><i class="fa fa-check"></i><b>6.2.8</b> footer</a></li>
</ul></li>
<li class="chapter" data-level="6.3" data-path="html-sections.html"><a href="html-sections.html#扩展阅读资料-3"><i class="fa fa-check"></i><b>6.3</b> 扩展阅读资料</a></li>
</ul></li>
<li class="chapter" data-level="7" data-path="html-group.html"><a href="html-group.html"><i class="fa fa-check"></i><b>7</b> 内容组织元素</a><ul>
<li class="chapter" data-level="7.1" data-path="html-group.html"><a href="html-group.html#内容组织相关元素"><i class="fa fa-check"></i><b>7.1</b> 内容组织相关元素</a><ul>
<li class="chapter" data-level="7.1.1" data-path="html-group.html"><a href="html-group.html#p"><i class="fa fa-check"></i><b>7.1.1</b> p</a></li>
<li class="chapter" data-level="7.1.2" data-path="html-group.html"><a href="html-group.html#address"><i class="fa fa-check"></i><b>7.1.2</b> address</a></li>
<li class="chapter" data-level="7.1.3" data-path="html-group.html"><a href="html-group.html#hr"><i class="fa fa-check"></i><b>7.1.3</b> hr</a></li>
<li class="chapter" data-level="7.1.4" data-path="html-group.html"><a href="html-group.html#pre"><i class="fa fa-check"></i><b>7.1.4</b> pre</a></li>
<li class="chapter" data-level="7.1.5" data-path="html-group.html"><a href="html-group.html#blockquote"><i class="fa fa-check"></i><b>7.1.5</b> blockquote</a></li>
<li class="chapter" data-level="7.1.6" data-path="html-group.html"><a href="html-group.html#ol"><i class="fa fa-check"></i><b>7.1.6</b> ol</a></li>
<li class="chapter" data-level="7.1.7" data-path="html-group.html"><a href="html-group.html#ul"><i class="fa fa-check"></i><b>7.1.7</b> ul</a></li>
<li class="chapter" data-level="7.1.8" data-path="html-group.html"><a href="html-group.html#li"><i class="fa fa-check"></i><b>7.1.8</b> li</a></li>
<li class="chapter" data-level="7.1.9" data-path="html-group.html"><a href="html-group.html#dl"><i class="fa fa-check"></i><b>7.1.9</b> dl</a></li>
<li class="chapter" data-level="7.1.10" data-path="html-group.html"><a href="html-group.html#dt"><i class="fa fa-check"></i><b>7.1.10</b> dt</a></li>
<li class="chapter" data-level="7.1.11" data-path="html-group.html"><a href="html-group.html#dd"><i class="fa fa-check"></i><b>7.1.11</b> dd</a></li>
<li class="chapter" data-level="7.1.12" data-path="html-group.html"><a href="html-group.html#figure"><i class="fa fa-check"></i><b>7.1.12</b> figure</a></li>
<li class="chapter" data-level="7.1.13" data-path="html-group.html"><a href="html-group.html#figcaption"><i class="fa fa-check"></i><b>7.1.13</b> figcaption</a></li>
<li class="chapter" data-level="7.1.14" data-path="html-group.html"><a href="html-group.html#main"><i class="fa fa-check"></i><b>7.1.14</b> main</a></li>
<li class="chapter" data-level="7.1.15" data-path="html-group.html"><a href="html-group.html#div"><i class="fa fa-check"></i><b>7.1.15</b> div</a></li>
</ul></li>
<li class="chapter" data-level="7.2" data-path="html-group.html"><a href="html-group.html#扩展阅读资料-4"><i class="fa fa-check"></i><b>7.2</b> 扩展阅读资料</a></li>
</ul></li>
<li class="chapter" data-level="8" data-path="html-text.html"><a href="html-text.html"><i class="fa fa-check"></i><b>8</b> 文本语义元素</a><ul>
<li class="chapter" data-level="8.1" data-path="html-text.html"><a href="html-text.html#a"><i class="fa fa-check"></i><b>8.1</b> a</a></li>
<li class="chapter" data-level="8.2" data-path="html-text.html"><a href="html-text.html#em"><i class="fa fa-check"></i><b>8.2</b> em</a></li>
<li class="chapter" data-level="8.3" data-path="html-text.html"><a href="html-text.html#strong"><i class="fa fa-check"></i><b>8.3</b> strong</a></li>
<li class="chapter" data-level="8.4" data-path="html-text.html"><a href="html-text.html#small"><i class="fa fa-check"></i><b>8.4</b> small</a></li>
<li class="chapter" data-level="8.5" data-path="html-text.html"><a href="html-text.html#s"><i class="fa fa-check"></i><b>8.5</b> s</a></li>
<li class="chapter" data-level="8.6" data-path="html-text.html"><a href="html-text.html#cite"><i class="fa fa-check"></i><b>8.6</b> cite</a></li>
<li class="chapter" data-level="8.7" data-path="html-text.html"><a href="html-text.html#q"><i class="fa fa-check"></i><b>8.7</b> q</a></li>
<li class="chapter" data-level="8.8" data-path="html-text.html"><a href="html-text.html#dfn"><i class="fa fa-check"></i><b>8.8</b> dfn</a></li>
<li class="chapter" data-level="8.9" data-path="html-text.html"><a href="html-text.html#abbr"><i class="fa fa-check"></i><b>8.9</b> abbr</a></li>
<li class="chapter" data-level="8.10" data-path="html-text.html"><a href="html-text.html#data"><i class="fa fa-check"></i><b>8.10</b> data</a></li>
<li class="chapter" data-level="8.11" data-path="html-text.html"><a href="html-text.html#time"><i class="fa fa-check"></i><b>8.11</b> time</a></li>
<li class="chapter" data-level="8.12" data-path="html-text.html"><a href="html-text.html#code"><i class="fa fa-check"></i><b>8.12</b> code</a></li>
<li class="chapter" data-level="8.13" data-path="html-text.html"><a href="html-text.html#var"><i class="fa fa-check"></i><b>8.13</b> var</a></li>
<li class="chapter" data-level="8.14" data-path="html-text.html"><a href="html-text.html#samp"><i class="fa fa-check"></i><b>8.14</b> samp</a></li>
<li class="chapter" data-level="8.15" data-path="html-text.html"><a href="html-text.html#kbd"><i class="fa fa-check"></i><b>8.15</b> kbd</a></li>
<li class="chapter" data-level="8.16" data-path="html-text.html"><a href="html-text.html#sub-和-sup"><i class="fa fa-check"></i><b>8.16</b> sub 和 sup</a></li>
<li class="chapter" data-level="8.17" data-path="html-text.html"><a href="html-text.html#i"><i class="fa fa-check"></i><b>8.17</b> i</a></li>
<li class="chapter" data-level="8.18" data-path="html-text.html"><a href="html-text.html#b"><i class="fa fa-check"></i><b>8.18</b> b</a></li>
<li class="chapter" data-level="8.19" data-path="html-text.html"><a href="html-text.html#u"><i class="fa fa-check"></i><b>8.19</b> u</a></li>
<li class="chapter" data-level="8.20" data-path="html-text.html"><a href="html-text.html#mark"><i class="fa fa-check"></i><b>8.20</b> mark</a></li>
<li class="chapter" data-level="8.21" data-path="html-text.html"><a href="html-text.html#ruby"><i class="fa fa-check"></i><b>8.21</b> ruby</a></li>
<li class="chapter" data-level="8.22" data-path="html-text.html"><a href="html-text.html#span"><i class="fa fa-check"></i><b>8.22</b> span</a></li>
<li class="chapter" data-level="8.23" data-path="html-text.html"><a href="html-text.html#br"><i class="fa fa-check"></i><b>8.23</b> br</a></li>
<li class="chapter" data-level="8.24" data-path="html-text.html"><a href="html-text.html#扩展阅读资料-5"><i class="fa fa-check"></i><b>8.24</b> 扩展阅读资料</a></li>
</ul></li>
<li class="chapter" data-level="9" data-path="html-edit.html"><a href="html-edit.html"><i class="fa fa-check"></i><b>9</b> 编辑相关元素</a><ul>
<li class="chapter" data-level="9.1" data-path="html-edit.html"><a href="html-edit.html#ins"><i class="fa fa-check"></i><b>9.1</b> ins</a></li>
<li class="chapter" data-level="9.2" data-path="html-edit.html"><a href="html-edit.html#del"><i class="fa fa-check"></i><b>9.2</b> del</a></li>
<li class="chapter" data-level="9.3" data-path="html-edit.html"><a href="html-edit.html#扩展阅读资料-6"><i class="fa fa-check"></i><b>9.3</b> 扩展阅读资料</a></li>
</ul></li>
<li class="chapter" data-level="10" data-path="html-embed.html"><a href="html-embed.html"><i class="fa fa-check"></i><b>10</b> 嵌入内容元素</a><ul>
<li class="chapter" data-level="10.1" data-path="html-embed.html"><a href="html-embed.html#picture"><i class="fa fa-check"></i><b>10.1</b> picture</a></li>
<li class="chapter" data-level="10.2" data-path="html-embed.html"><a href="html-embed.html#img"><i class="fa fa-check"></i><b>10.2</b> img</a></li>
<li class="chapter" data-level="10.3" data-path="html-embed.html"><a href="html-embed.html#iframe"><i class="fa fa-check"></i><b>10.3</b> iframe</a></li>
<li class="chapter" data-level="10.4" data-path="html-embed.html"><a href="html-embed.html#embed"><i class="fa fa-check"></i><b>10.4</b> embed</a><ul>
<li class="chapter" data-level="10.4.1" data-path="html-embed.html"><a href="html-embed.html#嵌入-flash"><i class="fa fa-check"></i><b>10.4.1</b> 嵌入 flash</a></li>
<li class="chapter" data-level="10.4.2" data-path="html-embed.html"><a href="html-embed.html#嵌入视频平台的内容"><i class="fa fa-check"></i><b>10.4.2</b> 嵌入视频平台的内容</a></li>
</ul></li>
<li class="chapter" data-level="10.5" data-path="html-embed.html"><a href="html-embed.html#object"><i class="fa fa-check"></i><b>10.5</b> object</a></li>
<li class="chapter" data-level="10.6" data-path="html-embed.html"><a href="html-embed.html#video"><i class="fa fa-check"></i><b>10.6</b> video</a></li>
<li class="chapter" data-level="10.7" data-path="html-embed.html"><a href="html-embed.html#audio"><i class="fa fa-check"></i><b>10.7</b> audio</a><ul>
<li class="chapter" data-level="10.7.1" data-path="html-embed.html"><a href="html-embed.html#设置音频播放属性"><i class="fa fa-check"></i><b>10.7.1</b> 设置音频播放属性</a></li>
<li class="chapter" data-level="10.7.2" data-path="html-embed.html"><a href="html-embed.html#指定多种音频格式"><i class="fa fa-check"></i><b>10.7.2</b> 指定多种音频格式</a></li>
</ul></li>
<li class="chapter" data-level="10.8" data-path="html-embed.html"><a href="html-embed.html#source"><i class="fa fa-check"></i><b>10.8</b> source</a></li>
<li class="chapter" data-level="10.9" data-path="html-embed.html"><a href="html-embed.html#track"><i class="fa fa-check"></i><b>10.9</b> track</a></li>
<li class="chapter" data-level="10.10" data-path="html-embed.html"><a href="html-embed.html#map"><i class="fa fa-check"></i><b>10.10</b> map</a></li>
<li class="chapter" data-level="10.11" data-path="html-embed.html"><a href="html-embed.html#area"><i class="fa fa-check"></i><b>10.11</b> area</a></li>
<li class="chapter" data-level="10.12" data-path="html-embed.html"><a href="html-embed.html#math"><i class="fa fa-check"></i><b>10.12</b> math</a></li>
<li class="chapter" data-level="10.13" data-path="html-embed.html"><a href="html-embed.html#svg"><i class="fa fa-check"></i><b>10.13</b> svg</a></li>
<li class="chapter" data-level="10.14" data-path="html-embed.html"><a href="html-embed.html#扩展阅读资料-7"><i class="fa fa-check"></i><b>10.14</b> 扩展阅读资料</a></li>
</ul></li>
<li class="chapter" data-level="11" data-path="html-table.html"><a href="html-table.html"><i class="fa fa-check"></i><b>11</b> 表格元素</a><ul>
<li class="chapter" data-level="11.1" data-path="html-table.html"><a href="html-table.html#table"><i class="fa fa-check"></i><b>11.1</b> table</a></li>
<li class="chapter" data-level="11.2" data-path="html-table.html"><a href="html-table.html#caption"><i class="fa fa-check"></i><b>11.2</b> caption</a></li>
<li class="chapter" data-level="11.3" data-path="html-table.html"><a href="html-table.html#tbody"><i class="fa fa-check"></i><b>11.3</b> tbody</a></li>
<li class="chapter" data-level="11.4" data-path="html-table.html"><a href="html-table.html#thead"><i class="fa fa-check"></i><b>11.4</b> thead</a></li>
<li class="chapter" data-level="11.5" data-path="html-table.html"><a href="html-table.html#tfoot"><i class="fa fa-check"></i><b>11.5</b> tfoot</a></li>
<li class="chapter" data-level="11.6" data-path="html-table.html"><a href="html-table.html#tr"><i class="fa fa-check"></i><b>11.6</b> tr</a></li>
<li class="chapter" data-level="11.7" data-path="html-table.html"><a href="html-table.html#td"><i class="fa fa-check"></i><b>11.7</b> td</a></li>
<li class="chapter" data-level="11.8" data-path="html-table.html"><a href="html-table.html#th"><i class="fa fa-check"></i><b>11.8</b> th</a></li>
<li class="chapter" data-level="11.9" data-path="html-table.html"><a href="html-table.html#扩展阅读资料-8"><i class="fa fa-check"></i><b>11.9</b> 扩展阅读资料</a></li>
</ul></li>
<li class="chapter" data-level="12" data-path="html-form.html"><a href="html-form.html"><i class="fa fa-check"></i><b>12</b> 表单元素</a><ul>
<li class="chapter" data-level="12.1" data-path="html-form.html"><a href="html-form.html#form"><i class="fa fa-check"></i><b>12.1</b> form</a></li>
<li class="chapter" data-level="12.2" data-path="html-form.html"><a href="html-form.html#lable"><i class="fa fa-check"></i><b>12.2</b> lable</a></li>
<li class="chapter" data-level="12.3" data-path="html-form.html"><a href="html-form.html#input"><i class="fa fa-check"></i><b>12.3</b> input</a></li>
<li class="chapter" data-level="12.4" data-path="html-form.html"><a href="html-form.html#button"><i class="fa fa-check"></i><b>12.4</b> button</a></li>
<li class="chapter" data-level="12.5" data-path="html-form.html"><a href="html-form.html#select"><i class="fa fa-check"></i><b>12.5</b> select</a></li>
<li class="chapter" data-level="12.6" data-path="html-form.html"><a href="html-form.html#datalist"><i class="fa fa-check"></i><b>12.6</b> datalist</a></li>
<li class="chapter" data-level="12.7" data-path="html-form.html"><a href="html-form.html#optgroup"><i class="fa fa-check"></i><b>12.7</b> optgroup</a></li>
<li class="chapter" data-level="12.8" data-path="html-form.html"><a href="html-form.html#option"><i class="fa fa-check"></i><b>12.8</b> option</a></li>
<li class="chapter" data-level="12.9" data-path="html-form.html"><a href="html-form.html#textarea"><i class="fa fa-check"></i><b>12.9</b> textarea</a></li>
<li class="chapter" data-level="12.10" data-path="html-form.html"><a href="html-form.html#keygen"><i class="fa fa-check"></i><b>12.10</b> keygen</a></li>
<li class="chapter" data-level="12.11" data-path="html-form.html"><a href="html-form.html#output"><i class="fa fa-check"></i><b>12.11</b> output</a></li>
<li class="chapter" data-level="12.12" data-path="html-form.html"><a href="html-form.html#progress"><i class="fa fa-check"></i><b>12.12</b> progress</a></li>
<li class="chapter" data-level="12.13" data-path="html-form.html"><a href="html-form.html#meter"><i class="fa fa-check"></i><b>12.13</b> meter</a></li>
<li class="chapter" data-level="12.14" data-path="html-form.html"><a href="html-form.html#filedset"><i class="fa fa-check"></i><b>12.14</b> filedset</a></li>
<li class="chapter" data-level="12.15" data-path="html-form.html"><a href="html-form.html#legend"><i class="fa fa-check"></i><b>12.15</b> legend</a></li>
<li class="chapter" data-level="12.16" data-path="html-form.html"><a href="html-form.html#扩展阅读资料-9"><i class="fa fa-check"></i><b>12.16</b> 扩展阅读资料</a></li>
</ul></li>
<li class="chapter" data-level="13" data-path="html-script.html"><a href="html-script.html"><i class="fa fa-check"></i><b>13</b> 脚本元素</a><ul>
<li class="chapter" data-level="13.1" data-path="html-script.html"><a href="html-script.html#script"><i class="fa fa-check"></i><b>13.1</b> script</a></li>
<li class="chapter" data-level="13.2" data-path="html-script.html"><a href="html-script.html#noscript"><i class="fa fa-check"></i><b>13.2</b> noscript</a></li>
<li class="chapter" data-level="13.3" data-path="html-script.html"><a href="html-script.html#template"><i class="fa fa-check"></i><b>13.3</b> template</a></li>
<li class="chapter" data-level="13.4" data-path="html-script.html"><a href="html-script.html#canvas"><i class="fa fa-check"></i><b>13.4</b> canvas</a></li>
<li class="chapter" data-level="13.5" data-path="html-script.html"><a href="html-script.html#扩展阅读资料-10"><i class="fa fa-check"></i><b>13.5</b> 扩展阅读资料</a></li>
</ul></li>
<li class="chapter" data-level="14" data-path="html-知识整理.html"><a href="html-知识整理.html"><i class="fa fa-check"></i><b>14</b> HTML 知识整理</a><ul>
<li class="chapter" data-level="14.1" data-path="html-知识整理.html"><a href="html-知识整理.html#html-nest"><i class="fa fa-check"></i><b>14.1</b> 嵌套规则</a></li>
</ul></li>
<li class="part"><span><b>II CSS</b></span></li>
<li class="chapter" data-level="15" data-path="css-intro.html"><a href="css-intro.html"><i class="fa fa-check"></i><b>15</b> CSS 简介及学习资源</a><ul>
<li class="chapter" data-level="15.1" data-path="css-intro.html"><a href="css-intro.html#使用样式表的三种方式"><i class="fa fa-check"></i><b>15.1</b> 使用样式表的三种方式</a><ul>
<li class="chapter" data-level="15.1.1" data-path="css-intro.html"><a href="css-intro.html#外部样式表"><i class="fa fa-check"></i><b>15.1.1</b> 外部样式表</a></li>
<li class="chapter" data-level="15.1.2" data-path="css-intro.html"><a href="css-intro.html#内部样式表"><i class="fa fa-check"></i><b>15.1.2</b> 内部样式表</a></li>
<li class="chapter" data-level="15.1.3" data-path="css-intro.html"><a href="css-intro.html#内嵌样式表"><i class="fa fa-check"></i><b>15.1.3</b> 内嵌样式表</a></li>
</ul></li>
<li class="chapter" data-level="15.2" data-path="css-intro.html"><a href="css-intro.html#在线学习资源及工具-1"><i class="fa fa-check"></i><b>15.2</b> 在线学习资源及工具</a></li>
</ul></li>
<li class="chapter" data-level="16" data-path="css-statement.html"><a href="css-statement.html"><i class="fa fa-check"></i><b>16</b> CSS 语法与规则</a><ul>
<li class="chapter" data-level="16.1" data-path="css-statement.html"><a href="css-statement.html#语法声明"><i class="fa fa-check"></i><b>16.1</b> 语法声明</a><ul>
<li class="chapter" data-level="16.1.1" data-path="css-statement.html"><a href="css-statement.html#at-规则"><i class="fa fa-check"></i><b>16.1.1</b> at 规则</a></li>
<li class="chapter" data-level="16.1.2" data-path="css-statement.html"><a href="css-statement.html#规则集"><i class="fa fa-check"></i><b>16.1.2</b> 规则集</a></li>
</ul></li>
<li class="chapter" data-level="16.2" data-path="css-statement.html"><a href="css-statement.html#css-注释"><i class="fa fa-check"></i><b>16.2</b> CSS 注释</a></li>
</ul></li>
<li class="chapter" data-level="17" data-path="css-selector.html"><a href="css-selector.html"><i class="fa fa-check"></i><b>17</b> CSS 选择符</a><ul>
<li class="chapter" data-level="17.1" data-path="css-selector.html"><a href="css-selector.html#简单选择符"><i class="fa fa-check"></i><b>17.1</b> 简单选择符</a><ul>
<li class="chapter" data-level="17.1.1" data-path="css-selector.html"><a href="css-selector.html#类型选择符"><i class="fa fa-check"></i><b>17.1.1</b> 类型选择符</a></li>
<li class="chapter" data-level="17.1.2" data-path="css-selector.html"><a href="css-selector.html#通配选择符"><i class="fa fa-check"></i><b>17.1.2</b> 通配选择符</a></li>
<li class="chapter" data-level="17.1.3" data-path="css-selector.html"><a href="css-selector.html#属性选择符"><i class="fa fa-check"></i><b>17.1.3</b> 属性选择符</a></li>
<li class="chapter" data-level="17.1.4" data-path="css-selector.html"><a href="css-selector.html#类选择符"><i class="fa fa-check"></i><b>17.1.4</b> 类选择符</a></li>
<li class="chapter" data-level="17.1.5" data-path="css-selector.html"><a href="css-selector.html#id-选择符"><i class="fa fa-check"></i><b>17.1.5</b> ID 选择符</a></li>
<li class="chapter" data-level="17.1.6" data-path="css-selector.html"><a href="css-selector.html#简单选择符之伪类选择符"><i class="fa fa-check"></i><b>17.1.6</b> 简单选择符之伪类选择符</a></li>
</ul></li>
<li class="chapter" data-level="17.2" data-path="css-selector.html"><a href="css-selector.html#伪元素选择符"><i class="fa fa-check"></i><b>17.2</b> 伪元素选择符</a></li>
<li class="chapter" data-level="17.3" data-path="css-selector.html"><a href="css-selector.html#组合选择符"><i class="fa fa-check"></i><b>17.3</b> 组合选择符</a><ul>
<li class="chapter" data-level="17.3.1" data-path="css-selector.html"><a href="css-selector.html#后代选择符"><i class="fa fa-check"></i><b>17.3.1</b> 后代选择符</a></li>
<li class="chapter" data-level="17.3.2" data-path="css-selector.html"><a href="css-selector.html#子元素选择符"><i class="fa fa-check"></i><b>17.3.2</b> 子元素选择符</a></li>
<li class="chapter" data-level="17.3.3" data-path="css-selector.html"><a href="css-selector.html#相邻选择符"><i class="fa fa-check"></i><b>17.3.3</b> 相邻选择符</a></li>
<li class="chapter" data-level="17.3.4" data-path="css-selector.html"><a href="css-selector.html#兄弟选择符"><i class="fa fa-check"></i><b>17.3.4</b> 兄弟选择符</a></li>
</ul></li>
<li class="chapter" data-level="17.4" data-path="css-selector.html"><a href="css-selector.html#群组选择符"><i class="fa fa-check"></i><b>17.4</b> 群组选择符</a></li>
<li class="chapter" data-level="17.5" data-path="css-selector.html"><a href="css-selector.html#参考资料"><i class="fa fa-check"></i><b>17.5</b> 参考资料</a></li>
</ul></li>
<li class="chapter" data-level="18" data-path="css-cascade.html"><a href="css-cascade.html"><i class="fa fa-check"></i><b>18</b> 样式级联</a><ul>
<li class="chapter" data-level="18.1" data-path="css-cascade.html"><a href="css-cascade.html#级联顺序"><i class="fa fa-check"></i><b>18.1</b> 级联顺序</a></li>
<li class="chapter" data-level="18.2" data-path="css-cascade.html"><a href="css-cascade.html#important-规则"><i class="fa fa-check"></i><b>18.2</b> !important 规则</a></li>
<li class="chapter" data-level="18.3" data-path="css-cascade.html"><a href="css-cascade.html#选择符优先级别"><i class="fa fa-check"></i><b>18.3</b> 选择符优先级别</a></li>
<li class="chapter" data-level="18.4" data-path="css-cascade.html"><a href="css-cascade.html#扩展阅读资料-11"><i class="fa fa-check"></i><b>18.4</b> 扩展阅读资料</a></li>
</ul></li>
<li class="chapter" data-level="19" data-path="css-unit.html"><a href="css-unit.html"><i class="fa fa-check"></i><b>19</b> CSS 的取值</a><ul>
<li class="chapter" data-level="19.1" data-path="css-unit.html"><a href="css-unit.html#长度"><i class="fa fa-check"></i><b>19.1</b> 长度</a><ul>
<li class="chapter" data-level="19.1.1" data-path="css-unit.html"><a href="css-unit.html#文本相对长度"><i class="fa fa-check"></i><b>19.1.1</b> 文本相对长度</a></li>
<li class="chapter" data-level="19.1.2" data-path="css-unit.html"><a href="css-unit.html#视图窗口相对长度"><i class="fa fa-check"></i><b>19.1.2</b> 视图窗口相对长度</a></li>
</ul></li>
<li class="chapter" data-level="19.2" data-path="css-unit.html"><a href="css-unit.html#角度"><i class="fa fa-check"></i><b>19.2</b> 角度</a></li>
<li class="chapter" data-level="19.3" data-path="css-unit.html"><a href="css-unit.html#时间"><i class="fa fa-check"></i><b>19.3</b> 时间</a></li>
<li class="chapter" data-level="19.4" data-path="css-unit.html"><a href="css-unit.html#频率"><i class="fa fa-check"></i><b>19.4</b> 频率</a></li>
<li class="chapter" data-level="19.5" data-path="css-unit.html"><a href="css-unit.html#布局"><i class="fa fa-check"></i><b>19.5</b> 布局</a></li>
<li class="chapter" data-level="19.6" data-path="css-unit.html"><a href="css-unit.html#颜色"><i class="fa fa-check"></i><b>19.6</b> 颜色</a></li>
<li class="chapter" data-level="19.7" data-path="css-unit.html"><a href="css-unit.html#数字"><i class="fa fa-check"></i><b>19.7</b> 数字</a><ul>
<li class="chapter" data-level="19.7.1" data-path="css-unit.html"><a href="css-unit.html#section-1"><i class="fa fa-check"></i><b>19.7.1</b> <number></a></li>
<li class="chapter" data-level="19.7.2" data-path="css-unit.html"><a href="css-unit.html#section-2"><i class="fa fa-check"></i><b>19.7.2</b> <integer></a></li>
<li class="chapter" data-level="19.7.3" data-path="css-unit.html"><a href="css-unit.html#section-3"><i class="fa fa-check"></i><b>19.7.3</b> <percentage></a></li>
</ul></li>
</ul></li>
<li class="chapter" data-level="20" data-path="css-text.html"><a href="css-text.html"><i class="fa fa-check"></i><b>20</b> 文本样式属性</a><ul>
<li class="chapter" data-level="20.1" data-path="css-text.html"><a href="css-text.html#设定字体"><i class="fa fa-check"></i><b>20.1</b> 设定字体</a></li>
<li class="chapter" data-level="20.2" data-path="css-text.html"><a href="css-text.html#创建斜体"><i class="fa fa-check"></i><b>20.2</b> 创建斜体</a></li>
<li class="chapter" data-level="20.3" data-path="css-text.html"><a href="css-text.html#应用粗体"><i class="fa fa-check"></i><b>20.3</b> 应用粗体</a></li>
<li class="chapter" data-level="20.4" data-path="css-text.html"><a href="css-text.html#设置字体大小"><i class="fa fa-check"></i><b>20.4</b> 设置字体大小</a></li>
<li class="chapter" data-level="20.5" data-path="css-text.html"><a href="css-text.html#设置行间距"><i class="fa fa-check"></i><b>20.5</b> 设置行间距</a></li>
<li class="chapter" data-level="20.6" data-path="css-text.html"><a href="css-text.html#同时设置所有字体值"><i class="fa fa-check"></i><b>20.6</b> 同时设置所有字体值</a></li>
<li class="chapter" data-level="20.7" data-path="css-text.html"><a href="css-text.html#设置字体颜色"><i class="fa fa-check"></i><b>20.7</b> 设置字体颜色</a></li>
<li class="chapter" data-level="20.8" data-path="css-text.html"><a href="css-text.html#控制字符间距"><i class="fa fa-check"></i><b>20.8</b> 控制字符间距</a></li>
<li class="chapter" data-level="20.9" data-path="css-text.html"><a href="css-text.html#首行缩进"><i class="fa fa-check"></i><b>20.9</b> 首行缩进</a></li>
<li class="chapter" data-level="20.10" data-path="css-text.html"><a href="css-text.html#文本对齐"><i class="fa fa-check"></i><b>20.10</b> 文本对齐</a></li>
<li class="chapter" data-level="20.11" data-path="css-text.html"><a href="css-text.html#文本装饰"><i class="fa fa-check"></i><b>20.11</b> 文本装饰</a></li>
<li class="chapter" data-level="20.12" data-path="css-text.html"><a href="css-text.html#其他文本样式"><i class="fa fa-check"></i><b>20.12</b> 其他文本样式</a></li>
</ul></li>
<li class="chapter" data-level="21" data-path="css-background.html"><a href="css-background.html"><i class="fa fa-check"></i><b>21</b> 背景</a><ul>
<li class="chapter" data-level="21.1" data-path="css-background.html"><a href="css-background.html#设置背景色"><i class="fa fa-check"></i><b>21.1</b> 设置背景色</a></li>
<li class="chapter" data-level="21.2" data-path="css-background.html"><a href="css-background.html#设置背景图片"><i class="fa fa-check"></i><b>21.2</b> 设置背景图片</a></li>
<li class="chapter" data-level="21.3" data-path="css-background.html"><a href="css-background.html#设置线性渐变背景"><i class="fa fa-check"></i><b>21.3</b> 设置线性渐变背景</a></li>
<li class="chapter" data-level="21.4" data-path="css-background.html"><a href="css-background.html#设置径向渐变"><i class="fa fa-check"></i><b>21.4</b> 设置径向渐变</a></li>
<li class="chapter" data-level="21.5" data-path="css-background.html"><a href="css-background.html#使用多个色标"><i class="fa fa-check"></i><b>21.5</b> 使用多个色标</a></li>
</ul></li>
<li class="chapter" data-level="22" data-path="css-box.html"><a href="css-box.html"><i class="fa fa-check"></i><b>22</b> 盒模型</a><ul>
<li class="chapter" data-level="22.1" data-path="css-box.html"><a href="css-box.html#盒模型的概念"><i class="fa fa-check"></i><b>22.1</b> 盒模型的概念</a></li>
<li class="chapter" data-level="22.2" data-path="css-box.html"><a href="css-box.html#设置盒子大小"><i class="fa fa-check"></i><b>22.2</b> 设置盒子大小</a></li>
<li class="chapter" data-level="22.3" data-path="css-box.html"><a href="css-box.html#设置外边距"><i class="fa fa-check"></i><b>22.3</b> 设置外边距</a></li>
<li class="chapter" data-level="22.4" data-path="css-box.html"><a href="css-box.html#设定内边距"><i class="fa fa-check"></i><b>22.4</b> 设定内边距</a></li>
<li class="chapter" data-level="22.5" data-path="css-box.html"><a href="css-box.html#设置边框"><i class="fa fa-check"></i><b>22.5</b> 设置边框</a></li>
<li class="chapter" data-level="22.6" data-path="css-box.html"><a href="css-box.html#圆角"><i class="fa fa-check"></i><b>22.6</b> 圆角</a></li>
<li class="chapter" data-level="22.7" data-path="css-box.html"><a href="css-box.html#外边距叠加"><i class="fa fa-check"></i><b>22.7</b> 外边距叠加</a><ul>
<li class="chapter" data-level="22.7.1" data-path="css-box.html"><a href="css-box.html#什么时候会发生外边距叠加"><i class="fa fa-check"></i><b>22.7.1</b> 什么时候会发生外边距叠加</a></li>
<li class="chapter" data-level="22.7.2" data-path="css-box.html"><a href="css-box.html#如何避免外边距叠加"><i class="fa fa-check"></i><b>22.7.2</b> 如何避免外边距叠加</a></li>
</ul></li>
<li class="chapter" data-level="22.8" data-path="css-box.html"><a href="css-box.html#参考资料-1"><i class="fa fa-check"></i><b>22.8</b> 参考资料</a></li>
</ul></li>
<li class="chapter" data-level="23" data-path="css-position.html"><a href="css-position.html"><i class="fa fa-check"></i><b>23</b> 定位及布局</a><ul>
<li class="chapter" data-level="23.1" data-path="css-position.html"><a href="css-position.html#信息流"><i class="fa fa-check"></i><b>23.1</b> 信息流</a></li>
<li class="chapter" data-level="23.2" data-path="css-position.html"><a href="css-position.html#display"><i class="fa fa-check"></i><b>23.2</b> display</a></li>
<li class="chapter" data-level="23.3" data-path="css-position.html"><a href="css-position.html#浮动"><i class="fa fa-check"></i><b>23.3</b> 浮动</a></li>
<li class="chapter" data-level="23.4" data-path="css-position.html"><a href="css-position.html#清除浮动"><i class="fa fa-check"></i><b>23.4</b> 清除浮动</a></li>
<li class="chapter" data-level="23.5" data-path="css-position.html"><a href="css-position.html#position"><i class="fa fa-check"></i><b>23.5</b> position</a></li>
<li class="chapter" data-level="23.6" data-path="css-position.html"><a href="css-position.html#toprightbottomleft"><i class="fa fa-check"></i><b>23.6</b> top、right、bottom、left</a></li>
<li class="chapter" data-level="23.7" data-path="css-position.html"><a href="css-position.html#clip"><i class="fa fa-check"></i><b>23.7</b> clip</a></li>
<li class="chapter" data-level="23.8" data-path="css-position.html"><a href="css-position.html#z-index"><i class="fa fa-check"></i><b>23.8</b> z-index</a></li>
<li class="chapter" data-level="23.9" data-path="css-position.html"><a href="css-position.html#css-中的居中"><i class="fa fa-check"></i><b>23.9</b> CSS 中的居中</a></li>
</ul></li>
<li class="chapter" data-level="24" data-path="css-transform.html"><a href="css-transform.html"><i class="fa fa-check"></i><b>24</b> CSS 变形</a><ul>
<li class="chapter" data-level="24.1" data-path="css-transform.html"><a href="css-transform.html#css-变形的语法"><i class="fa fa-check"></i><b>24.1</b> CSS 变形的语法</a></li>
<li class="chapter" data-level="24.2" data-path="css-transform.html"><a href="css-transform.html#d-变形"><i class="fa fa-check"></i><b>24.2</b> 2D 变形</a><ul>
<li class="chapter" data-level="24.2.1" data-path="css-transform.html"><a href="css-transform.html#d-旋转"><i class="fa fa-check"></i><b>24.2.1</b> 2D 旋转</a></li>
</ul></li>
<li class="chapter" data-level="24.3" data-path="css-transform.html"><a href="css-transform.html#d-缩放"><i class="fa fa-check"></i><b>24.3</b> 2D 缩放</a></li>
<li class="chapter" data-level="24.4" data-path="css-transform.html"><a href="css-transform.html#d-位移"><i class="fa fa-check"></i><b>24.4</b> 2D 位移</a></li>
<li class="chapter" data-level="24.5" data-path="css-transform.html"><a href="css-transform.html#d-倾斜"><i class="fa fa-check"></i><b>24.5</b> 2D 倾斜</a></li>
<li class="chapter" data-level="24.6" data-path="css-transform.html"><a href="css-transform.html#变形组合"><i class="fa fa-check"></i><b>24.6</b> 变形组合</a></li>
<li class="chapter" data-level="24.7" data-path="css-transform.html"><a href="css-transform.html#设置变形的原点"><i class="fa fa-check"></i><b>24.7</b> 设置变形的原点</a></li>
<li class="chapter" data-level="24.8" data-path="css-transform.html"><a href="css-transform.html#透视"><i class="fa fa-check"></i><b>24.8</b> 透视</a></li>
<li class="chapter" data-level="24.9" data-path="css-transform.html"><a href="css-transform.html#d-旋转-1"><i class="fa fa-check"></i><b>24.9</b> 3D 旋转</a></li>
<li class="chapter" data-level="24.10" data-path="css-transform.html"><a href="css-transform.html#d-缩放-1"><i class="fa fa-check"></i><b>24.10</b> 3D 缩放</a></li>
<li class="chapter" data-level="24.11" data-path="css-transform.html"><a href="css-transform.html#d-位移-1"><i class="fa fa-check"></i><b>24.11</b> 3D 位移</a></li>
<li class="chapter" data-level="24.12" data-path="css-transform.html"><a href="css-transform.html#变形风格"><i class="fa fa-check"></i><b>24.12</b> 变形风格</a></li>
<li class="chapter" data-level="24.13" data-path="css-transform.html"><a href="css-transform.html#背部可见性"><i class="fa fa-check"></i><b>24.13</b> 背部可见性</a></li>
</ul></li>
<li class="chapter" data-level="25" data-path="css-animate.html"><a href="css-animate.html"><i class="fa fa-check"></i><b>25</b> CSS 过渡及动画</a><ul>
<li class="chapter" data-level="25.1" data-path="css-animate.html"><a href="css-animate.html#过渡"><i class="fa fa-check"></i><b>25.1</b> 过渡</a><ul>
<li class="chapter" data-level="25.1.1" data-path="css-animate.html"><a href="css-animate.html#过渡属性"><i class="fa fa-check"></i><b>25.1.1</b> 过渡属性</a></li>
</ul></li>
<li class="chapter" data-level="25.2" data-path="css-animate.html"><a href="css-animate.html#过渡效果持续时间"><i class="fa fa-check"></i><b>25.2</b> 过渡效果持续时间</a></li>
<li class="chapter" data-level="25.3" data-path="css-animate.html"><a href="css-animate.html#过渡的缓动效果设置"><i class="fa fa-check"></i><b>25.3</b> 过渡的缓动效果设置</a></li>
<li class="chapter" data-level="25.4" data-path="css-animate.html"><a href="css-animate.html#过渡效果的延迟设置"><i class="fa fa-check"></i><b>25.4</b> 过渡效果的延迟设置</a></li>
<li class="chapter" data-level="25.5" data-path="css-animate.html"><a href="css-animate.html#过渡效果的简写"><i class="fa fa-check"></i><b>25.5</b> 过渡效果的简写</a></li>
<li class="chapter" data-level="25.6" data-path="css-animate.html"><a href="css-animate.html#变形和过渡的结合"><i class="fa fa-check"></i><b>25.6</b> 变形和过渡的结合</a></li>
<li class="chapter" data-level="25.7" data-path="css-animate.html"><a href="css-animate.html#动画"><i class="fa fa-check"></i><b>25.7</b> 动画</a><ul>
<li class="chapter" data-level="25.7.1" data-path="css-animate.html"><a href="css-animate.html#关键帧"><i class="fa fa-check"></i><b>25.7.1</b> 关键帧</a></li>
<li class="chapter" data-level="25.7.2" data-path="css-animate.html"><a href="css-animate.html#动画名称"><i class="fa fa-check"></i><b>25.7.2</b> 动画名称</a></li>
<li class="chapter" data-level="25.7.3" data-path="css-animate.html"><a href="css-animate.html#动画持续时间缓动效果及延迟"><i class="fa fa-check"></i><b>25.7.3</b> 动画持续时间、缓动效果及延迟</a></li>
<li class="chapter" data-level="25.7.4" data-path="css-animate.html"><a href="css-animate.html#动画重复次数"><i class="fa fa-check"></i><b>25.7.4</b> 动画重复次数</a></li>
<li class="chapter" data-level="25.7.5" data-path="css-animate.html"><a href="css-animate.html#动画方向"><i class="fa fa-check"></i><b>25.7.5</b> 动画方向</a></li>
<li class="chapter" data-level="25.7.6" data-path="css-animate.html"><a href="css-animate.html#动画运行状态"><i class="fa fa-check"></i><b>25.7.6</b> 动画运行状态</a></li>
<li class="chapter" data-level="25.7.7" data-path="css-animate.html"><a href="css-animate.html#动画填充模式"><i class="fa fa-check"></i><b>25.7.7</b> 动画填充模式</a></li>
<li class="chapter" data-level="25.7.8" data-path="css-animate.html"><a href="css-animate.html#动画属性简写"><i class="fa fa-check"></i><b>25.7.8</b> 动画属性简写</a></li>
</ul></li>
<li class="chapter" data-level="25.8" data-path="css-animate.html"><a href="css-animate.html#动画库-animate.css-的使用"><i class="fa fa-check"></i><b>25.8</b> 动画库 animate.css 的使用</a></li>
</ul></li>
<li class="chapter" data-level="26" data-path="flexbox.html"><a href="flexbox.html"><i class="fa fa-check"></i><b>26</b> Flexbox</a><ul>
<li class="chapter" data-level="26.1" data-path="flexbox.html"><a href="flexbox.html#基本概念"><i class="fa fa-check"></i><b>26.1</b> 基本概念</a><ul>
<li class="chapter" data-level="26.1.1" data-path="flexbox.html"><a href="flexbox.html#几个术语"><i class="fa fa-check"></i><b>26.1.1</b> 几个术语</a></li>
</ul></li>
<li class="chapter" data-level="26.2" data-path="flexbox.html"><a href="flexbox.html#flexbox容器的构造方法"><i class="fa fa-check"></i><b>26.2</b> Flexbox容器的构造方法</a></li>
<li class="chapter" data-level="26.3" data-path="flexbox.html"><a href="flexbox.html#flexbox容器特性"><i class="fa fa-check"></i><b>26.3</b> Flexbox容器特性</a><ul>
<li class="chapter" data-level="26.3.1" data-path="flexbox.html"><a href="flexbox.html#flex-direction属性"><i class="fa fa-check"></i><b>26.3.1</b> flex-direction属性</a></li>
<li class="chapter" data-level="26.3.2" data-path="flexbox.html"><a href="flexbox.html#flex-wrap属性"><i class="fa fa-check"></i><b>26.3.2</b> flex-wrap属性</a></li>
<li class="chapter" data-level="26.3.3" data-path="flexbox.html"><a href="flexbox.html#flex-flow属性"><i class="fa fa-check"></i><b>26.3.3</b> flex-flow属性</a></li>
<li class="chapter" data-level="26.3.4" data-path="flexbox.html"><a href="flexbox.html#justify-content属性"><i class="fa fa-check"></i><b>26.3.4</b> justify-content属性</a></li>
<li class="chapter" data-level="26.3.5" data-path="flexbox.html"><a href="flexbox.html#align-items属性"><i class="fa fa-check"></i><b>26.3.5</b> align-items属性</a></li>
<li class="chapter" data-level="26.3.6" data-path="flexbox.html"><a href="flexbox.html#align-content属性"><i class="fa fa-check"></i><b>26.3.6</b> align-content属性</a></li>
</ul></li>
<li class="chapter" data-level="26.4" data-path="flexbox.html"><a href="flexbox.html#flexbox项目特性"><i class="fa fa-check"></i><b>26.4</b> Flexbox项目特性</a><ul>
<li class="chapter" data-level="26.4.1" data-path="flexbox.html"><a href="flexbox.html#order属性"><i class="fa fa-check"></i><b>26.4.1</b> order属性</a></li>
<li class="chapter" data-level="26.4.2" data-path="flexbox.html"><a href="flexbox.html#flex-grow属性"><i class="fa fa-check"></i><b>26.4.2</b> flex-grow属性</a></li>
<li class="chapter" data-level="26.4.3" data-path="flexbox.html"><a href="flexbox.html#flex-shrink属性"><i class="fa fa-check"></i><b>26.4.3</b> flex-shrink属性</a></li>
<li class="chapter" data-level="26.4.4" data-path="flexbox.html"><a href="flexbox.html#flex-basis属性"><i class="fa fa-check"></i><b>26.4.4</b> flex-basis属性</a></li>
<li class="chapter" data-level="26.4.5" data-path="flexbox.html"><a href="flexbox.html#flex属性"><i class="fa fa-check"></i><b>26.4.5</b> flex属性</a></li>
<li class="chapter" data-level="26.4.6" data-path="flexbox.html"><a href="flexbox.html#align-self属性"><i class="fa fa-check"></i><b>26.4.6</b> align-self属性</a></li>
</ul></li>
<li class="chapter" data-level="26.5" data-path="flexbox.html"><a href="flexbox.html#参考资料-2"><i class="fa fa-check"></i><b>26.5</b> 参考资料</a></li>
</ul></li>
<li class="chapter" data-level="27" data-path="css-layout.html"><a href="css-layout.html"><i class="fa fa-check"></i><b>27</b> CSS layout</a><ul>
<li class="chapter" data-level="27.1" data-path="css-layout.html"><a href="css-layout.html#分栏布局"><i class="fa fa-check"></i><b>27.1</b> 分栏布局</a></li>
<li class="chapter" data-level="27.2" data-path="css-layout.html"><a href="css-layout.html#网格布局"><i class="fa fa-check"></i><b>27.2</b> 网格布局</a><ul>
<li class="chapter" data-level="27.2.1" data-path="css-layout.html"><a href="css-layout.html#指定列的数量"><i class="fa fa-check"></i><b>27.2.1</b> 指定列的数量</a></li>
<li class="chapter" data-level="27.2.2" data-path="css-layout.html"><a href="css-layout.html#网格之间的间距"><i class="fa fa-check"></i><b>27.2.2</b> 网格之间的间距</a></li>
<li class="chapter" data-level="27.2.3" data-path="css-layout.html"><a href="css-layout.html#网格的大小"><i class="fa fa-check"></i><b>27.2.3</b> 网格的大小</a></li>
<li class="chapter" data-level="27.2.4" data-path="css-layout.html"><a href="css-layout.html#基于行的位置设置"><i class="fa fa-check"></i><b>27.2.4</b> 基于行的位置设置</a></li>
<li class="chapter" data-level="27.2.5" data-path="css-layout.html"><a href="css-layout.html#网格模板区域"><i class="fa fa-check"></i><b>27.2.5</b> 网格模板区域</a></li>
</ul></li>
<li class="chapter" data-level="27.3" data-path="css-layout.html"><a href="css-layout.html#参考资料-3"><i class="fa fa-check"></i><b>27.3</b> 参考资料</a></li>
</ul></li>
<li class="part"><span><b>III JavaScript</b></span></li>
<li class="chapter" data-level="28" data-path="javascript-1.html"><a href="javascript-1.html"><i class="fa fa-check"></i><b>28</b> JavaScript</a><ul>
<li class="chapter" data-level="28.1" data-path="javascript-1.html"><a href="javascript-1.html#javascript-简介"><i class="fa fa-check"></i><b>28.1</b> JavaScript 简介</a><ul>
<li class="chapter" data-level="28.1.1" data-path="javascript-1.html"><a href="javascript-1.html#javascript-的特点"><i class="fa fa-check"></i><b>28.1.1</b> JavaScript 的特点</a></li>
<li class="chapter" data-level="28.1.2" data-path="javascript-1.html"><a href="javascript-1.html#javascript-的用途"><i class="fa fa-check"></i><b>28.1.2</b> JavaScript 的用途</a></li>
</ul></li>
<li class="chapter" data-level="28.2" data-path="javascript-1.html"><a href="javascript-1.html#javascript-开发环境"><i class="fa fa-check"></i><b>28.2</b> JavaScript 开发环境</a></li>
<li class="chapter" data-level="28.3" data-path="javascript-1.html"><a href="javascript-1.html#javascript-语言的发展趋势"><i class="fa fa-check"></i><b>28.3</b> Javascript 语言的发展趋势</a></li>
<li class="chapter" data-level="28.4" data-path="javascript-1.html"><a href="javascript-1.html#javascript-学习资源"><i class="fa fa-check"></i><b>28.4</b> JavaScript 学习资源</a></li>
</ul></li>
<li class="chapter" data-level="29" data-path="在网页中使用-javascript-的方法.html"><a href="在网页中使用-javascript-的方法.html"><i class="fa fa-check"></i><b>29</b> 在网页中使用 JavaScript 的方法</a><ul>
<li class="chapter" data-level="29.1" data-path="在网页中使用-javascript-的方法.html"><a href="在网页中使用-javascript-的方法.html#嵌入式"><i class="fa fa-check"></i><b>29.1</b> 嵌入式</a></li>
<li class="chapter" data-level="29.2" data-path="在网页中使用-javascript-的方法.html"><a href="在网页中使用-javascript-的方法.html#行内式"><i class="fa fa-check"></i><b>29.2</b> 行内式</a></li>
<li class="chapter" data-level="29.3" data-path="在网页中使用-javascript-的方法.html"><a href="在网页中使用-javascript-的方法.html#链接式"><i class="fa fa-check"></i><b>29.3</b> 链接式</a><ul>
<li class="chapter" data-level="29.3.1" data-path="在网页中使用-javascript-的方法.html"><a href="在网页中使用-javascript-的方法.html#延迟脚本-defer"><i class="fa fa-check"></i><b>29.3.1</b> 延迟脚本 defer</a></li>
<li class="chapter" data-level="29.3.2" data-path="在网页中使用-javascript-的方法.html"><a href="在网页中使用-javascript-的方法.html#异步脚本-async"><i class="fa fa-check"></i><b>29.3.2</b> 异步脚本 async</a></li>
</ul></li>
<li class="chapter" data-level="29.4" data-path="在网页中使用-javascript-的方法.html"><a href="在网页中使用-javascript-的方法.html#script-标签的位置"><i class="fa fa-check"></i><b>29.4</b> script 标签的位置</a></li>
<li class="chapter" data-level="29.5" data-path="在网页中使用-javascript-的方法.html"><a href="在网页中使用-javascript-的方法.html#阅读材料"><i class="fa fa-check"></i><b>29.5</b> 阅读材料</a></li>
</ul></li>
<li class="chapter" data-level="30" data-path="javascript-核心语法.html"><a href="javascript-核心语法.html"><i class="fa fa-check"></i><b>30</b> JavaScript 核心语法</a><ul>
<li class="chapter" data-level="30.1" data-path="javascript-核心语法.html"><a href="javascript-核心语法.html#区分大小写"><i class="fa fa-check"></i><b>30.1</b> 区分大小写</a></li>
<li class="chapter" data-level="30.2" data-path="javascript-核心语法.html"><a href="javascript-核心语法.html#注释"><i class="fa fa-check"></i><b>30.2</b> 注释</a></li>
<li class="chapter" data-level="30.3" data-path="javascript-核心语法.html"><a href="javascript-核心语法.html#变量"><i class="fa fa-check"></i><b>30.3</b> 变量</a></li>
<li class="chapter" data-level="30.4" data-path="javascript-核心语法.html"><a href="javascript-核心语法.html#分号"><i class="fa fa-check"></i><b>30.4</b> 分号</a></li>
<li class="chapter" data-level="30.5" data-path="javascript-核心语法.html"><a href="javascript-核心语法.html#常量"><i class="fa fa-check"></i><b>30.5</b> 常量</a></li>
<li class="chapter" data-level="30.6" data-path="javascript-核心语法.html"><a href="javascript-核心语法.html#运算符"><i class="fa fa-check"></i><b>30.6</b> 运算符</a><ul>
<li class="chapter" data-level="30.6.1" data-path="javascript-核心语法.html"><a href="javascript-核心语法.html#算术运算符"><i class="fa fa-check"></i><b>30.6.1</b> 算术运算符</a></li>
<li class="chapter" data-level="30.6.2" data-path="javascript-核心语法.html"><a href="javascript-核心语法.html#关系运算符"><i class="fa fa-check"></i><b>30.6.2</b> 关系运算符</a></li>
<li class="chapter" data-level="30.6.3" data-path="javascript-核心语法.html"><a href="javascript-核心语法.html#赋值运算符"><i class="fa fa-check"></i><b>30.6.3</b> 赋值运算符</a></li>
<li class="chapter" data-level="30.6.4" data-path="javascript-核心语法.html"><a href="javascript-核心语法.html#逻辑运算符"><i class="fa fa-check"></i><b>30.6.4</b> 逻辑运算符</a></li>
<li class="chapter" data-level="30.6.5" data-path="javascript-核心语法.html"><a href="javascript-核心语法.html#连接运算符"><i class="fa fa-check"></i><b>30.6.5</b> 连接运算符</a></li>
</ul></li>
<li class="chapter" data-level="30.7" data-path="javascript-核心语法.html"><a href="javascript-核心语法.html#流程控制"><i class="fa fa-check"></i><b>30.7</b> 流程控制</a><ul>
<li class="chapter" data-level="30.7.1" data-path="javascript-核心语法.html"><a href="javascript-核心语法.html#语句块"><i class="fa fa-check"></i><b>30.7.1</b> 语句块</a></li>
<li class="chapter" data-level="30.7.2" data-path="javascript-核心语法.html"><a href="javascript-核心语法.html#break"><i class="fa fa-check"></i><b>30.7.2</b> break</a></li>
<li class="chapter" data-level="30.7.3" data-path="javascript-核心语法.html"><a href="javascript-核心语法.html#ifelse"><i class="fa fa-check"></i><b>30.7.3</b> if…else</a></li>
<li class="chapter" data-level="30.7.4" data-path="javascript-核心语法.html"><a href="javascript-核心语法.html#switch"><i class="fa fa-check"></i><b>30.7.4</b> switch</a></li>
<li class="chapter" data-level="30.7.5" data-path="javascript-核心语法.html"><a href="javascript-核心语法.html#for"><i class="fa fa-check"></i><b>30.7.5</b> for</a></li>
<li class="chapter" data-level="30.7.6" data-path="javascript-核心语法.html"><a href="javascript-核心语法.html#while"><i class="fa fa-check"></i><b>30.7.6</b> while</a></li>
<li class="chapter" data-level="30.7.7" data-path="javascript-核心语法.html"><a href="javascript-核心语法.html#dowhile"><i class="fa fa-check"></i><b>30.7.7</b> do…while</a></li>
</ul></li>
<li class="chapter" data-level="30.8" data-path="javascript-核心语法.html"><a href="javascript-核心语法.html#函数"><i class="fa fa-check"></i><b>30.8</b> 函数</a><ul>
<li class="chapter" data-level="30.8.1" data-path="javascript-核心语法.html"><a href="javascript-核心语法.html#回调函数"><i class="fa fa-check"></i><b>30.8.1</b> 回调函数</a></li>
</ul></li>
</ul></li>
<li class="chapter" data-level="31" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html"><i class="fa fa-check"></i><b>31</b> Javascript中的表达式和运算符</a><ul>
<li class="chapter" data-level="31.1" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#主要表达式"><i class="fa fa-check"></i><b>31.1</b> 主要表达式</a><ul>
<li class="chapter" data-level="31.1.1" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#this"><i class="fa fa-check"></i><b>31.1.1</b> <code>this</code></a></li>
<li class="chapter" data-level="31.1.2" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#function"><i class="fa fa-check"></i><b>31.1.2</b> function</a></li>
<li class="chapter" data-level="31.1.3" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#class"><i class="fa fa-check"></i><b>31.1.3</b> class</a></li>
<li class="chapter" data-level="31.1.4" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#function-1"><i class="fa fa-check"></i><b>31.1.4</b> function*</a></li>
<li class="chapter" data-level="31.1.5" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#yield"><i class="fa fa-check"></i><b>31.1.5</b> yield</a></li>
<li class="chapter" data-level="31.1.6" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#yield-1"><i class="fa fa-check"></i><b>31.1.6</b> yield*</a></li>
<li class="chapter" data-level="31.1.7" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#async-function"><i class="fa fa-check"></i><b>31.1.7</b> async function*</a></li>
<li class="chapter" data-level="31.1.8" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#await"><i class="fa fa-check"></i><b>31.1.8</b> await</a></li>
<li class="chapter" data-level="31.1.9" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#section-4"><i class="fa fa-check"></i><b>31.1.9</b> []</a></li>
<li class="chapter" data-level="31.1.10" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#section-5"><i class="fa fa-check"></i><b>31.1.10</b> </a></li>
<li class="chapter" data-level="31.1.11" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#abci"><i class="fa fa-check"></i><b>31.1.11</b> /ab+c/i</a></li>
<li class="chapter" data-level="31.1.12" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#section-6"><i class="fa fa-check"></i><b>31.1.12</b> ( )</a></li>
</ul></li>
<li class="chapter" data-level="31.2" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#左表达式"><i class="fa fa-check"></i><b>31.2</b> 左表达式</a><ul>
<li class="chapter" data-level="31.2.1" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#属性访问符"><i class="fa fa-check"></i><b>31.2.1</b> 属性访问符</a></li>
<li class="chapter" data-level="31.2.2" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#new"><i class="fa fa-check"></i><b>31.2.2</b> new</a></li>
<li class="chapter" data-level="31.2.3" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#new.target"><i class="fa fa-check"></i><b>31.2.3</b> new.target</a></li>
<li class="chapter" data-level="31.2.4" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#super"><i class="fa fa-check"></i><b>31.2.4</b> super</a></li>
<li class="chapter" data-level="31.2.5" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#obj"><i class="fa fa-check"></i><b>31.2.5</b> …obj</a></li>
</ul></li>
<li class="chapter" data-level="31.3" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#自增和自减"><i class="fa fa-check"></i><b>31.3</b> 自增和自减</a></li>
<li class="chapter" data-level="31.4" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#一元运算符"><i class="fa fa-check"></i><b>31.4</b> 一元运算符</a><ul>
<li class="chapter" data-level="31.4.1" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#一元正号"><i class="fa fa-check"></i><b>31.4.1</b> 一元正号</a></li>
</ul></li>
<li class="chapter" data-level="31.5" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#算术运算符-1"><i class="fa fa-check"></i><b>31.5</b> 算术运算符</a></li>
<li class="chapter" data-level="31.6" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#关系运算符-1"><i class="fa fa-check"></i><b>31.6</b> 关系运算符</a></li>
<li class="chapter" data-level="31.7" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#相等运算符"><i class="fa fa-check"></i><b>31.7</b> 相等运算符</a></li>
<li class="chapter" data-level="31.8" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#位移运算符"><i class="fa fa-check"></i><b>31.8</b> 位移运算符</a></li>
<li class="chapter" data-level="31.9" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#二进制位运算符"><i class="fa fa-check"></i><b>31.9</b> 二进制位运算符</a></li>
<li class="chapter" data-level="31.10" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#二元逻辑运算符"><i class="fa fa-check"></i><b>31.10</b> 二元逻辑运算符</a></li>
<li class="chapter" data-level="31.11" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#条件三元运算符"><i class="fa fa-check"></i><b>31.11</b> 条件(三元)运算符</a></li>
<li class="chapter" data-level="31.12" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#赋值运算符-1"><i class="fa fa-check"></i><b>31.12</b> 赋值运算符</a></li>
<li class="chapter" data-level="31.13" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#逗号操作符"><i class="fa fa-check"></i><b>31.13</b> 逗号操作符</a></li>
</ul></li>
<li class="chapter" data-level="32" data-path="语句和声明.html"><a href="语句和声明.html"><i class="fa fa-check"></i><b>32</b> 语句和声明</a><ul>
<li class="chapter" data-level="32.1" data-path="语句和声明.html"><a href="语句和声明.html#控制流程"><i class="fa fa-check"></i><b>32.1</b> 控制流程</a><ul>
<li class="chapter" data-level="32.1.1" data-path="语句和声明.html"><a href="语句和声明.html#块声明"><i class="fa fa-check"></i><b>32.1.1</b> 块声明</a></li>
<li class="chapter" data-level="32.1.2" data-path="语句和声明.html"><a href="语句和声明.html#break-1"><i class="fa fa-check"></i><b>32.1.2</b> break</a></li>
<li class="chapter" data-level="32.1.3" data-path="语句和声明.html"><a href="语句和声明.html#continue"><i class="fa fa-check"></i><b>32.1.3</b> continue</a></li>
<li class="chapter" data-level="32.1.4" data-path="语句和声明.html"><a href="语句和声明.html#空语句"><i class="fa fa-check"></i><b>32.1.4</b> 空语句</a></li>
<li class="chapter" data-level="32.1.5" data-path="语句和声明.html"><a href="语句和声明.html#ifelse-1"><i class="fa fa-check"></i><b>32.1.5</b> if……else</a></li>
<li class="chapter" data-level="32.1.6" data-path="语句和声明.html"><a href="语句和声明.html#switch-1"><i class="fa fa-check"></i><b>32.1.6</b> switch</a></li>
<li class="chapter" data-level="32.1.7" data-path="语句和声明.html"><a href="语句和声明.html#throw"><i class="fa fa-check"></i><b>32.1.7</b> throw</a></li>
<li class="chapter" data-level="32.1.8" data-path="语句和声明.html"><a href="语句和声明.html#trycatch"><i class="fa fa-check"></i><b>32.1.8</b> try…catch</a></li>
</ul></li>
<li class="chapter" data-level="32.2" data-path="语句和声明.html"><a href="语句和声明.html#声明"><i class="fa fa-check"></i><b>32.2</b> 声明</a><ul>
<li class="chapter" data-level="32.2.1" data-path="语句和声明.html"><a href="语句和声明.html#var-1"><i class="fa fa-check"></i><b>32.2.1</b> var</a></li>
<li class="chapter" data-level="32.2.2" data-path="语句和声明.html"><a href="语句和声明.html#let"><i class="fa fa-check"></i><b>32.2.2</b> let</a></li>
<li class="chapter" data-level="32.2.3" data-path="语句和声明.html"><a href="语句和声明.html#const"><i class="fa fa-check"></i><b>32.2.3</b> const</a></li>
</ul></li>
<li class="chapter" data-level="32.3" data-path="语句和声明.html"><a href="语句和声明.html#函数和类"><i class="fa fa-check"></i><b>32.3</b> 函数和类</a><ul>
<li class="chapter" data-level="32.3.1" data-path="语句和声明.html"><a href="语句和声明.html#function-2"><i class="fa fa-check"></i><b>32.3.1</b> function</a></li>
<li class="chapter" data-level="32.3.2" data-path="语句和声明.html"><a href="语句和声明.html#function-3"><i class="fa fa-check"></i><b>32.3.2</b> function*</a></li>
<li class="chapter" data-level="32.3.3" data-path="语句和声明.html"><a href="语句和声明.html#return"><i class="fa fa-check"></i><b>32.3.3</b> return</a></li>
<li class="chapter" data-level="32.3.4" data-path="语句和声明.html"><a href="语句和声明.html#class-1"><i class="fa fa-check"></i><b>32.3.4</b> class</a></li>
</ul></li>
<li class="chapter" data-level="32.4" data-path="语句和声明.html"><a href="语句和声明.html#迭代器"><i class="fa fa-check"></i><b>32.4</b> 迭代器</a><ul>
<li class="chapter" data-level="32.4.1" data-path="语句和声明.html"><a href="语句和声明.html#dowhile-1"><i class="fa fa-check"></i><b>32.4.1</b> do…while</a></li>
<li class="chapter" data-level="32.4.2" data-path="语句和声明.html"><a href="语句和声明.html#for-1"><i class="fa fa-check"></i><b>32.4.2</b> for</a></li>
<li class="chapter" data-level="32.4.3" data-path="语句和声明.html"><a href="语句和声明.html#for-eachin"><i class="fa fa-check"></i><b>32.4.3</b> for each…in</a></li>
<li class="chapter" data-level="32.4.4" data-path="语句和声明.html"><a href="语句和声明.html#forin"><i class="fa fa-check"></i><b>32.4.4</b> for…in</a></li>
<li class="chapter" data-level="32.4.5" data-path="语句和声明.html"><a href="语句和声明.html#forof"><i class="fa fa-check"></i><b>32.4.5</b> for…of</a></li>
<li class="chapter" data-level="32.4.6" data-path="语句和声明.html"><a href="语句和声明.html#while-1"><i class="fa fa-check"></i><b>32.4.6</b> while</a></li>
</ul></li>
<li class="chapter" data-level="32.5" data-path="语句和声明.html"><a href="语句和声明.html#其他"><i class="fa fa-check"></i><b>32.5</b> 其他</a><ul>
<li class="chapter" data-level="32.5.1" data-path="语句和声明.html"><a href="语句和声明.html#debugger"><i class="fa fa-check"></i><b>32.5.1</b> debugger</a></li>
</ul></li>
</ul></li>
<li class="chapter" data-level="33" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html"><i class="fa fa-check"></i><b>33</b> JavaScript 变量类型</a><ul>
<li class="chapter" data-level="33.1" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#boolean布尔型"><i class="fa fa-check"></i><b>33.1</b> Boolean布尔型</a></li>
<li class="chapter" data-level="33.2" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#null空类型"><i class="fa fa-check"></i><b>33.2</b> Null空类型</a></li>
<li class="chapter" data-level="33.3" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#undefined未定义类型"><i class="fa fa-check"></i><b>33.3</b> Undefined未定义类型</a></li>
<li class="chapter" data-level="33.4" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#number数值型"><i class="fa fa-check"></i><b>33.4</b> Number数值型</a><ul>
<li class="chapter" data-level="33.4.1" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#浮点数值"><i class="fa fa-check"></i><b>33.4.1</b> 浮点数值</a></li>
<li class="chapter" data-level="33.4.2" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#数值范围"><i class="fa fa-check"></i><b>33.4.2</b> 数值范围</a></li>
<li class="chapter" data-level="33.4.3" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#nan"><i class="fa fa-check"></i><b>33.4.3</b> NaN</a></li>
<li class="chapter" data-level="33.4.4" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#转化类型"><i class="fa fa-check"></i><b>33.4.4</b> 转化类型</a></li>
</ul></li>
<li class="chapter" data-level="33.5" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#string-字符串"><i class="fa fa-check"></i><b>33.5</b> String 字符串</a><ul>
<li class="chapter" data-level="33.5.1" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#转换为字符串"><i class="fa fa-check"></i><b>33.5.1</b> 转换为字符串</a></li>
</ul></li>
<li class="chapter" data-level="33.6" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#symbol-符号类型"><i class="fa fa-check"></i><b>33.6</b> Symbol 符号类型</a></li>
<li class="chapter" data-level="33.7" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#object-对象类型"><i class="fa fa-check"></i><b>33.7</b> Object 对象类型</a><ul>
<li class="chapter" data-level="33.7.1" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#数组"><i class="fa fa-check"></i><b>33.7.1</b> 数组</a></li>
</ul></li>
<li class="chapter" data-level="33.8" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#查看变量类型"><i class="fa fa-check"></i><b>33.8</b> 查看变量类型</a></li>
<li class="chapter" data-level="33.9" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#变量类型的转换"><i class="fa fa-check"></i><b>33.9</b> 变量类型的转换</a></li>
<li class="chapter" data-level="33.10" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#javascript-object"><i class="fa fa-check"></i><b>33.10</b> JavaScript Object</a><ul>
<li class="chapter" data-level="33.10.1" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#对象的创建"><i class="fa fa-check"></i><b>33.10.1</b> 对象的创建</a></li>
</ul></li>
<li class="chapter" data-level="33.11" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#更改删除对象中的属性"><i class="fa fa-check"></i><b>33.11</b> 更改、删除对象中的属性</a></li>
<li class="chapter" data-level="33.12" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#为对象增加方法"><i class="fa fa-check"></i><b>33.12</b> 为对象增加方法</a></li>
<li class="chapter" data-level="33.13" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#循环输出对象的属性"><i class="fa fa-check"></i><b>33.13</b> 循环输出对象的属性</a></li>
<li class="chapter" data-level="33.14" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#javascript-函数"><i class="fa fa-check"></i><b>33.14</b> JavaScript 函数</a><ul>
<li class="chapter" data-level="33.14.1" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#function对象"><i class="fa fa-check"></i><b>33.14.1</b> function对象</a></li>
<li class="chapter" data-level="33.14.2" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#函数的定义"><i class="fa fa-check"></i><b>33.14.2</b> 函数的定义</a></li>
<li class="chapter" data-level="33.14.3" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#函数参数"><i class="fa fa-check"></i><b>33.14.3</b> 函数参数</a></li>
<li class="chapter" data-level="33.14.4" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#变量作用域"><i class="fa fa-check"></i><b>33.14.4</b> 变量作用域</a></li>
</ul></li>
<li class="chapter" data-level="33.15" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#javascrip-数组"><i class="fa fa-check"></i><b>33.15</b> JavaScrip 数组</a><ul>
<li class="chapter" data-level="33.15.1" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#创建数组"><i class="fa fa-check"></i><b>33.15.1</b> 创建数组</a></li>
<li class="chapter" data-level="33.15.2" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#访问数组元素"><i class="fa fa-check"></i><b>33.15.2</b> 访问数组元素</a></li>
<li class="chapter" data-level="33.15.3" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#常用属性及方法"><i class="fa fa-check"></i><b>33.15.3</b> 常用属性及方法</a></li>
<li class="chapter" data-level="33.15.4" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#扩展阅读资料-12"><i class="fa fa-check"></i><b>33.15.4</b> 扩展阅读资料</a></li>
</ul></li>
</ul></li>
<li class="chapter" data-level="34" data-path="全局对象.html"><a href="全局对象.html"><i class="fa fa-check"></i><b>34</b> 全局对象</a><ul>
<li class="chapter" data-level="34.1" data-path="全局对象.html"><a href="全局对象.html#浏览器对象模型-bom"><i class="fa fa-check"></i><b>34.1</b> 浏览器对象模型 BOM</a><ul>
<li class="chapter" data-level="34.1.1" data-path="全局对象.html"><a href="全局对象.html#window-对象"><i class="fa fa-check"></i><b>34.1.1</b> window 对象</a></li>
<li class="chapter" data-level="34.1.2" data-path="全局对象.html"><a href="全局对象.html#控制台"><i class="fa fa-check"></i><b>34.1.2</b> 控制台</a></li>
<li class="chapter" data-level="34.1.3" data-path="全局对象.html"><a href="全局对象.html#navigator-对象"><i class="fa fa-check"></i><b>34.1.3</b> navigator 对象</a></li>
<li class="chapter" data-level="34.1.4" data-path="全局对象.html"><a href="全局对象.html#location-对象"><i class="fa fa-check"></i><b>34.1.4</b> location 对象</a></li>
<li class="chapter" data-level="34.1.5" data-path="全局对象.html"><a href="全局对象.html#screen-对象"><i class="fa fa-check"></i><b>34.1.5</b> screen 对象</a></li>
<li class="chapter" data-level="34.1.6" data-path="全局对象.html"><a href="全局对象.html#history-对象"><i class="fa fa-check"></i><b>34.1.6</b> history 对象</a></li>
<li class="chapter" data-level="34.1.7" data-path="全局对象.html"><a href="全局对象.html#document-对象"><i class="fa fa-check"></i><b>34.1.7</b> document 对象</a></li>
</ul></li>
<li class="chapter" data-level="34.2" data-path="全局对象.html"><a href="全局对象.html#dom"><i class="fa fa-check"></i><b>34.2</b> DOM</a><ul>
<li class="chapter" data-level="34.2.1" data-path="全局对象.html"><a href="全局对象.html#html-文档与-dom"><i class="fa fa-check"></i><b>34.2.1</b> HTML 文档与 DOM</a></li>
<li class="chapter" data-level="34.2.2" data-path="全局对象.html"><a href="全局对象.html#节点"><i class="fa fa-check"></i><b>34.2.2</b> 节点</a></li>
<li class="chapter" data-level="34.2.3" data-path="全局对象.html"><a href="全局对象.html#使用-dom"><i class="fa fa-check"></i><b>34.2.3</b> 使用 DOM</a></li>
</ul></li>
<li class="chapter" data-level="34.3" data-path="全局对象.html"><a href="全局对象.html#json"><i class="fa fa-check"></i><b>34.3</b> JSON</a><ul>
<li class="chapter" data-level="34.3.1" data-path="全局对象.html"><a href="全局对象.html#转义"><i class="fa fa-check"></i><b>34.3.1</b> 转义</a></li>
<li class="chapter" data-level="34.3.2" data-path="全局对象.html"><a href="全局对象.html#方法"><i class="fa fa-check"></i><b>34.3.2</b> 方法</a></li>
</ul></li>
<li class="chapter" data-level="34.4" data-path="全局对象.html"><a href="全局对象.html#参考资料-4"><i class="fa fa-check"></i><b>34.4</b> 参考资料</a></li>
</ul></li>
<li class="chapter" data-level="35" data-path="事件.html"><a href="事件.html"><i class="fa fa-check"></i><b>35</b> 事件</a><ul>
<li class="chapter" data-level="35.1" data-path="事件.html"><a href="事件.html#事件监听方法"><i class="fa fa-check"></i><b>35.1</b> 事件监听方法</a><ul>
<li class="chapter" data-level="35.1.1" data-path="事件.html"><a href="事件.html#通用事件监听方法"><i class="fa fa-check"></i><b>35.1.1</b> 通用事件监听方法</a></li>
<li class="chapter" data-level="35.1.2" data-path="事件.html"><a href="事件.html#dom-监听事件的方法"><i class="fa fa-check"></i><b>35.1.2</b> DOM 监听事件的方法</a></li>
</ul></li>
<li class="chapter" data-level="35.2" data-path="事件.html"><a href="事件.html#事件对象"><i class="fa fa-check"></i><b>35.2</b> 事件对象</a></li>
</ul></li>
<li class="chapter" data-level="36" data-path="javascript-进阶.html"><a href="javascript-进阶.html"><i class="fa fa-check"></i><b>36</b> JavaScript 进阶</a><ul>
<li class="chapter" data-level="36.1" data-path="javascript-进阶.html"><a href="javascript-进阶.html#错误处理"><i class="fa fa-check"></i><b>36.1</b> 错误处理</a></li>
<li class="chapter" data-level="36.2" data-path="javascript-进阶.html"><a href="javascript-进阶.html#回调函数-callback"><i class="fa fa-check"></i><b>36.2</b> 回调函数 callback</a></li>
<li class="chapter" data-level="36.3" data-path="javascript-进阶.html"><a href="javascript-进阶.html#同步与异步"><i class="fa fa-check"></i><b>36.3</b> 同步与异步</a></li>
<li class="chapter" data-level="36.4" data-path="javascript-进阶.html"><a href="javascript-进阶.html#为什么使用-promise"><i class="fa fa-check"></i><b>36.4</b> 为什么使用 promise</a></li>
<li class="chapter" data-level="36.5" data-path="javascript-进阶.html"><a href="javascript-进阶.html#promise-对象"><i class="fa fa-check"></i><b>36.5</b> Promise 对象</a></li>
<li class="chapter" data-level="36.6" data-path="javascript-进阶.html"><a href="javascript-进阶.html#参考资料-5"><i class="fa fa-check"></i><b>36.6</b> 参考资料</a></li>
</ul></li>
<li class="chapter" data-level="37" data-path="ecmascript-6-简介.html"><a href="ecmascript-6-简介.html"><i class="fa fa-check"></i><b>37</b> ECMAScript 6 简介</a><ul>
<li class="chapter" data-level="37.1" data-path="ecmascript-6-简介.html"><a href="ecmascript-6-简介.html#变量声明"><i class="fa fa-check"></i><b>37.1</b> 变量声明</a></li>
<li class="chapter" data-level="37.2" data-path="ecmascript-6-简介.html"><a href="ecmascript-6-简介.html#模板字符串"><i class="fa fa-check"></i><b>37.2</b> 模板字符串</a></li>
<li class="chapter" data-level="37.3" data-path="ecmascript-6-简介.html"><a href="ecmascript-6-简介.html#默认参数"><i class="fa fa-check"></i><b>37.3</b> 默认参数</a></li>
<li class="chapter" data-level="37.4" data-path="ecmascript-6-简介.html"><a href="ecmascript-6-简介.html#箭头函数"><i class="fa fa-check"></i><b>37.4</b> 箭头函数</a></li>
<li class="chapter" data-level="37.5" data-path="ecmascript-6-简介.html"><a href="ecmascript-6-简介.html#模块的导入和导出"><i class="fa fa-check"></i><b>37.5</b> 模块的导入和导出</a></li>
<li class="chapter" data-level="37.6" data-path="ecmascript-6-简介.html"><a href="ecmascript-6-简介.html#析构赋值"><i class="fa fa-check"></i><b>37.6</b> 析构赋值</a></li>
<li class="chapter" data-level="37.7" data-path="ecmascript-6-简介.html"><a href="ecmascript-6-简介.html#展开运算符"><i class="fa fa-check"></i><b>37.7</b> 展开运算符</a></li>
<li class="chapter" data-level="37.8" data-path="ecmascript-6-简介.html"><a href="ecmascript-6-简介.html#promise"><i class="fa fa-check"></i><b>37.8</b> Promise</a><ul>
<li class="chapter" data-level="37.8.1" data-path="ecmascript-6-简介.html"><a href="ecmascript-6-简介.html#回调函数-callback-1"><i class="fa fa-check"></i><b>37.8.1</b> 回调函数 callback</a></li>
<li class="chapter" data-level="37.8.2" data-path="ecmascript-6-简介.html"><a href="ecmascript-6-简介.html#同步与异步-1"><i class="fa fa-check"></i><b>37.8.2</b> 同步与异步</a></li>
<li class="chapter" data-level="37.8.3" data-path="ecmascript-6-简介.html"><a href="ecmascript-6-简介.html#为什么使用-promise-1"><i class="fa fa-check"></i><b>37.8.3</b> 为什么使用 promise</a></li>
<li class="chapter" data-level="37.8.4" data-path="ecmascript-6-简介.html"><a href="ecmascript-6-简介.html#promise-对象-1"><i class="fa fa-check"></i><b>37.8.4</b> Promise 对象</a></li>
</ul></li>
<li class="chapter" data-level="37.9" data-path="ecmascript-6-简介.html"><a href="ecmascript-6-简介.html#参考资料-6"><i class="fa fa-check"></i><b>37.9</b> 参考资料</a></li>
</ul></li>
<li class="part"><span><b>IV SVG</b></span></li>
<li class="chapter" data-level="38" data-path="svg-1.html"><a href="svg-1.html"><i class="fa fa-check"></i><b>38</b> SVG</a><ul>
<li class="chapter" data-level="38.1" data-path="svg-1.html"><a href="svg-1.html#在html中使用的方式"><i class="fa fa-check"></i><b>38.1</b> 在HTML中使用的方式</a><ul>
<li class="chapter" data-level="38.1.1" data-path="svg-1.html"><a href="svg-1.html#作为内容"><i class="fa fa-check"></i><b>38.1.1</b> 作为内容</a></li>
<li class="chapter" data-level="38.1.2" data-path="svg-1.html"><a href="svg-1.html#作为图片"><i class="fa fa-check"></i><b>38.1.2</b> 作为图片</a></li>
<li class="chapter" data-level="38.1.3" data-path="svg-1.html"><a href="svg-1.html#作为元素"><i class="fa fa-check"></i><b>38.1.3</b> 作为元素</a></li>
</ul></li>
<li class="chapter" data-level="38.2" data-path="svg-1.html"><a href="svg-1.html#基本概念-1"><i class="fa fa-check"></i><b>38.2</b> 基本概念</a><ul>
<li class="chapter" data-level="38.2.1" data-path="svg-1.html"><a href="svg-1.html#坐标系"><i class="fa fa-check"></i><b>38.2.1</b> 坐标系</a></li>
<li class="chapter" data-level="38.2.2" data-path="svg-1.html"><a href="svg-1.html#长度单位"><i class="fa fa-check"></i><b>38.2.2</b> 长度单位</a></li>
<li class="chapter" data-level="38.2.3" data-path="svg-1.html"><a href="svg-1.html#用户坐标系统"><i class="fa fa-check"></i><b>38.2.3</b> 用户坐标系统</a></li>
</ul></li>
<li class="chapter" data-level="38.3" data-path="svg-1.html"><a href="svg-1.html#形状"><i class="fa fa-check"></i><b>38.3</b> 形状</a><ul>
<li class="chapter" data-level="38.3.1" data-path="svg-1.html"><a href="svg-1.html#线-line"><i class="fa fa-check"></i><b>38.3.1</b> 线 <code>&lt;line&gt;</code></a></li>
<li class="chapter" data-level="38.3.2" data-path="svg-1.html"><a href="svg-1.html#矩形-rect"><i class="fa fa-check"></i><b>38.3.2</b> 矩形 <code>&lt;rect&gt;</code></a></li>
<li class="chapter" data-level="38.3.3" data-path="svg-1.html"><a href="svg-1.html#圆形-circle"><i class="fa fa-check"></i><b>38.3.3</b> 圆形 <code>&lt;circle&gt;</code></a></li>
<li class="chapter" data-level="38.3.4" data-path="svg-1.html"><a href="svg-1.html#椭圆-ellipse"><i class="fa fa-check"></i><b>38.3.4</b> 椭圆 <code>&lt;ellipse&gt;</code></a></li>
<li class="chapter" data-level="38.3.5" data-path="svg-1.html"><a href="svg-1.html#折线-polyline"><i class="fa fa-check"></i><b>38.3.5</b> 折线 <code>&lt;polyline&gt;</code></a></li>
<li class="chapter" data-level="38.3.6" data-path="svg-1.html"><a href="svg-1.html#多边形-polygon"><i class="fa fa-check"></i><b>38.3.6</b> 多边形 <code>&lt;polygon&gt;</code></a></li>
<li class="chapter" data-level="38.3.7" data-path="svg-1.html"><a href="svg-1.html#路径-path"><i class="fa fa-check"></i><b>38.3.7</b> 路径 <code>&lt;path&gt;</code></a></li>
</ul></li>
<li class="chapter" data-level="38.4" data-path="svg-1.html"><a href="svg-1.html#文本"><i class="fa fa-check"></i><b>38.4</b> 文本</a></li>
<li class="chapter" data-level="38.5" data-path="svg-1.html"><a href="svg-1.html#填充和边框"><i class="fa fa-check"></i><b>38.5</b> 填充和边框</a></li>
<li class="chapter" data-level="38.6" data-path="svg-1.html"><a href="svg-1.html#组合"><i class="fa fa-check"></i><b>38.6</b> 组合</a></li>
<li class="chapter" data-level="38.7" data-path="svg-1.html"><a href="svg-1.html#进阶"><i class="fa fa-check"></i><b>38.7</b> 进阶</a></li>
<li class="chapter" data-level="38.8" data-path="svg-1.html"><a href="svg-1.html#参考资料-7"><i class="fa fa-check"></i><b>38.8</b> 参考资料</a></li>
</ul></li>
<li class="part"><span><b>V D3</b></span></li>
<li class="chapter" data-level="39" data-path="d3.html"><a href="d3.html"><i class="fa fa-check"></i><b>39</b> D3</a><ul>
<li class="chapter" data-level="39.1" data-path="d3.html"><a href="d3.html#d3.js-简介"><i class="fa fa-check"></i><b>39.1</b> D3.js 简介</a></li>
<li class="chapter" data-level="39.2" data-path="d3.html"><a href="d3.html#d3.js必要基础"><i class="fa fa-check"></i><b>39.2</b> D3.js必要基础</a><ul>
<li class="chapter" data-level="39.2.1" data-path="d3.html"><a href="d3.html#链式操作"><i class="fa fa-check"></i><b>39.2.1</b> 链式操作</a></li>
<li class="chapter" data-level="39.2.2" data-path="d3.html"><a href="d3.html#绑定数据"><i class="fa fa-check"></i><b>39.2.2</b> 绑定数据</a></li>
<li class="chapter" data-level="39.2.3" data-path="d3.html"><a href="d3.html#d3-selection"><i class="fa fa-check"></i><b>39.2.3</b> d3-selection</a></li>
<li class="chapter" data-level="39.2.4" data-path="d3.html"><a href="d3.html#用d3生成svg"><i class="fa fa-check"></i><b>39.2.4</b> 用d3生成svg</a></li>
</ul></li>
<li class="chapter" data-level="39.3" data-path="d3.html"><a href="d3.html#制作柱状图"><i class="fa fa-check"></i><b>39.3</b> 制作柱状图</a><ul>
<li class="chapter" data-level="39.3.1" data-path="d3.html"><a href="d3.html#准备工作"><i class="fa fa-check"></i><b>39.3.1</b> 准备工作</a></li>
<li class="chapter" data-level="39.3.2" data-path="d3.html"><a href="d3.html#准备图表所在容器"><i class="fa fa-check"></i><b>39.3.2</b> 准备图表所在容器</a></li>
<li class="chapter" data-level="39.3.3" data-path="d3.html"><a href="d3.html#设定图表大小"><i class="fa fa-check"></i><b>39.3.3</b> 设定图表大小</a></li>
<li class="chapter" data-level="39.3.4" data-path="d3.html"><a href="d3.html#准备数据"><i class="fa fa-check"></i><b>39.3.4</b> 准备数据</a></li>
<li class="chapter" data-level="39.3.5" data-path="d3.html"><a href="d3.html#在svg中加入到容器中"><i class="fa fa-check"></i><b>39.3.5</b> 在svg中加入到容器中</a></li>
<li class="chapter" data-level="39.3.6" data-path="d3.html"><a href="d3.html#在svg中加入g元素作为子容器"><i class="fa fa-check"></i><b>39.3.6</b> 在svg中加入g元素作为子容器</a></li>
<li class="chapter" data-level="39.3.7" data-path="d3.html"><a href="d3.html#添加表头"><i class="fa fa-check"></i><b>39.3.7</b> 添加表头</a></li>
<li class="chapter" data-level="39.3.8" data-path="d3.html"><a href="d3.html#创建比例尺"><i class="fa fa-check"></i><b>39.3.8</b> 创建比例尺</a></li>
<li class="chapter" data-level="39.3.9" data-path="d3.html"><a href="d3.html#添加x轴和y轴"><i class="fa fa-check"></i><b>39.3.9</b> 添加x轴和y轴</a></li>
<li class="chapter" data-level="39.3.10" data-path="d3.html"><a href="d3.html#添加放直方的容器"><i class="fa fa-check"></i><b>39.3.10</b> 添加放直方的容器</a></li>
<li class="chapter" data-level="39.3.11" data-path="d3.html"><a href="d3.html#添加数据"><i class="fa fa-check"></i><b>39.3.11</b> 添加数据</a></li>
<li class="chapter" data-level="39.3.12" data-path="d3.html"><a href="d3.html#添加说明文字"><i class="fa fa-check"></i><b>39.3.12</b> 添加说明文字</a></li>
<li class="chapter" data-level="39.3.13" data-path="d3.html"><a href="d3.html#添加hover事件"><i class="fa fa-check"></i><b>39.3.13</b> 添加hover事件</a></li>
<li class="chapter" data-level="39.3.14" data-path="d3.html"><a href="d3.html#设置样式"><i class="fa fa-check"></i><b>39.3.14</b> 设置样式</a></li>
</ul></li>
<li class="chapter" data-level="39.4" data-path="d3.html"><a href="d3.html#参考资料-8"><i class="fa fa-check"></i><b>39.4</b> 参考资料</a></li>
<li class="chapter" data-level="39.5" data-path="d3.html"><a href="d3.html#选集selection"><i class="fa fa-check"></i><b>39.5</b> 选集selection</a></li>
</ul></li>
<li class="chapter" data-level="40" data-path="d3中的选集.html"><a href="d3中的选集.html"><i class="fa fa-check"></i><b>40</b> D3中的选集</a><ul>
<li class="chapter" data-level="40.1" data-path="d3中的选集.html"><a href="d3中的选集.html#选取单个元素"><i class="fa fa-check"></i><b>40.1</b> 选取单个元素</a></li>
<li class="chapter" data-level="40.2" data-path="d3中的选集.html"><a href="d3中的选集.html#选取多个元素"><i class="fa fa-check"></i><b>40.2</b> 选取多个元素</a></li>
<li class="chapter" data-level="40.3" data-path="d3中的选集.html"><a href="d3中的选集.html#使用子选择器"><i class="fa fa-check"></i><b>40.3</b> 使用子选择器</a></li>
<li class="chapter" data-level="40.4" data-path="d3中的选集.html"><a href="d3中的选集.html#获得原始元素"><i class="fa fa-check"></i><b>40.4</b> 获得原始元素</a></li>
<li class="chapter" data-level="40.5" data-path="d3中的选集.html"><a href="d3中的选集.html#参考资料-9"><i class="fa fa-check"></i><b>40.5</b> 参考资料</a></li>
</ul></li>
<li class="chapter" data-level="41" data-path="d3-js中的数据绑定与更新.html"><a href="d3-js中的数据绑定与更新.html"><i class="fa fa-check"></i><b>41</b> D3.js中的数据绑定与更新</a><ul>
<li class="chapter" data-level="41.1" data-path="d3-js中的数据绑定与更新.html"><a href="d3-js中的数据绑定与更新.html#进入更新退出模式"><i class="fa fa-check"></i><b>41.1</b> 进入—更新—退出模式</a><ul>
<li class="chapter" data-level="41.1.1" data-path="d3-js中的数据绑定与更新.html"><a href="d3-js中的数据绑定与更新.html#理解updateenterexit"><i class="fa fa-check"></i><b>41.1.1</b> 理解Update、Enter、Exit</a></li>
</ul></li>
<li class="chapter" data-level="41.2" data-path="d3-js中的数据绑定与更新.html"><a href="d3-js中的数据绑定与更新.html#将数组绑定为数据"><i class="fa fa-check"></i><b>41.2</b> 将数组绑定为数据</a></li>
<li class="chapter" data-level="41.3" data-path="d3-js中的数据绑定与更新.html"><a href="d3-js中的数据绑定与更新.html#将对象绑定为数组"><i class="fa fa-check"></i><b>41.3</b> 将对象绑定为数组</a></li>
<li class="chapter" data-level="41.4" data-path="d3-js中的数据绑定与更新.html"><a href="d3-js中的数据绑定与更新.html#打开外部数据文件"><i class="fa fa-check"></i><b>41.4</b> 打开外部数据文件</a></li>
<li class="chapter" data-level="41.5" data-path="d3-js中的数据绑定与更新.html"><a href="d3-js中的数据绑定与更新.html#参考资料-10"><i class="fa fa-check"></i><b>41.5</b> 参考资料</a></li>
</ul></li>
<li class="chapter" data-level="42" data-path="比例尺scale.html"><a href="比例尺scale.html"><i class="fa fa-check"></i><b>42</b> 比例尺Scale</a><ul>
<li class="chapter" data-level="42.1" data-path="比例尺scale.html"><a href="比例尺scale.html#连续比例尺"><i class="fa fa-check"></i><b>42.1</b> 连续比例尺</a></li>
<li class="chapter" data-level="42.2" data-path="比例尺scale.html"><a href="比例尺scale.html#序数比例尺"><i class="fa fa-check"></i><b>42.2</b> 序数比例尺</a></li>
</ul></li>
<li class="chapter" data-level="43" data-path="坐标轴.html"><a href="坐标轴.html"><i class="fa fa-check"></i><b>43</b> 坐标轴</a><ul>
<li class="chapter" data-level="43.1" data-path="坐标轴.html"><a href="坐标轴.html#d3.axisbottomscale"><i class="fa fa-check"></i><b>43.1</b> d3.axisBottom(scale)</a></li>
</ul></li>
<li class="part"><span><b>VI Node.js</b></span></li>
<li class="chapter" data-level="44" data-path="node-js.html"><a href="node-js.html"><i class="fa fa-check"></i><b>44</b> node.js</a><ul>
<li class="chapter" data-level="44.1" data-path="node-js.html"><a href="node-js.html#node.js-与-v8-引擎"><i class="fa fa-check"></i><b>44.1</b> Node.js 与 V8 引擎</a></li>
<li class="chapter" data-level="44.2" data-path="node-js.html"><a href="node-js.html#长轮询与非阻塞"><i class="fa fa-check"></i><b>44.2</b> 长轮询与非阻塞</a></li>
<li class="chapter" data-level="44.3" data-path="node-js.html"><a href="node-js.html#npm-介绍"><i class="fa fa-check"></i><b>44.3</b> NPM 介绍</a><ul>
<li class="chapter" data-level="44.3.1" data-path="node-js.html"><a href="node-js.html#安装"><i class="fa fa-check"></i><b>44.3.1</b> 安装</a></li>
<li class="chapter" data-level="44.3.2" data-path="node-js.html"><a href="node-js.html#更新"><i class="fa fa-check"></i><b>44.3.2</b> 更新</a></li>
<li class="chapter" data-level="44.3.3" data-path="node-js.html"><a href="node-js.html#常用-npm-命令"><i class="fa fa-check"></i><b>44.3.3</b> 常用 NPM 命令</a></li>
</ul></li>
<li class="chapter" data-level="44.4" data-path="node-js.html"><a href="node-js.html#node.js-起步"><i class="fa fa-check"></i><b>44.4</b> Node.js 起步</a><ul>
<li class="chapter" data-level="44.4.1" data-path="node-js.html"><a href="node-js.html#设置npm配置文件package.json"><i class="fa fa-check"></i><b>44.4.1</b> 设置NPM配置文件package.json</a></li>
</ul></li>
<li class="chapter" data-level="44.5" data-path="node-js.html"><a href="node-js.html#使用模块"><i class="fa fa-check"></i><b>44.5</b> 使用模块</a><ul>
<li class="chapter" data-level="44.5.1" data-path="node-js.html"><a href="node-js.html#使用内置的node.js模块"><i class="fa fa-check"></i><b>44.5.1</b> 使用内置的Node.js模块</a></li>
<li class="chapter" data-level="44.5.2" data-path="node-js.html"><a href="node-js.html#使用第三方node.js模块"><i class="fa fa-check"></i><b>44.5.2</b> 使用第三方Node.js模块</a></li>
<li class="chapter" data-level="44.5.3" data-path="node-js.html"><a href="node-js.html#创建并使用自定义的node.js模块"><i class="fa fa-check"></i><b>44.5.3</b> 创建并使用自定义的Node.js模块</a></li>
</ul></li>
</ul></li>
<li class="chapter" data-level="45" data-path="node-js-常用核心模块.html"><a href="node-js-常用核心模块.html"><i class="fa fa-check"></i><b>45</b> Node.js 常用核心模块</a><ul>
<li class="chapter" data-level="45.1" data-path="node-js-常用核心模块.html"><a href="node-js-常用核心模块.html#事件-events"><i class="fa fa-check"></i><b>45.1</b> 事件 Events</a></li>
<li class="chapter" data-level="45.2" data-path="node-js-常用核心模块.html"><a href="node-js-常用核心模块.html#file-system-模块"><i class="fa fa-check"></i><b>45.2</b> File System 模块</a><ul>
<li class="chapter" data-level="45.2.1" data-path="node-js-常用核心模块.html"><a href="node-js-常用核心模块.html#stat-获得文件信息"><i class="fa fa-check"></i><b>45.2.1</b> stat 获得文件信息</a></li>
<li class="chapter" data-level="45.2.2" data-path="node-js-常用核心模块.html"><a href="node-js-常用核心模块.html#mkdir"><i class="fa fa-check"></i><b>45.2.2</b> mkdir</a></li>
<li class="chapter" data-level="45.2.3" data-path="node-js-常用核心模块.html"><a href="node-js-常用核心模块.html#创建文件并写入内容"><i class="fa fa-check"></i><b>45.2.3</b> 创建文件并写入内容</a></li>
<li class="chapter" data-level="45.2.4" data-path="node-js-常用核心模块.html"><a href="node-js-常用核心模块.html#读取内容"><i class="fa fa-check"></i><b>45.2.4</b> 读取内容</a></li>
<li class="chapter" data-level="45.2.5" data-path="node-js-常用核心模块.html"><a href="node-js-常用核心模块.html#列出目录"><i class="fa fa-check"></i><b>45.2.5</b> 列出目录</a></li>
<li class="chapter" data-level="45.2.6" data-path="node-js-常用核心模块.html"><a href="node-js-常用核心模块.html#重命名"><i class="fa fa-check"></i><b>45.2.6</b> 重命名</a></li>
<li class="chapter" data-level="45.2.7" data-path="node-js-常用核心模块.html"><a href="node-js-常用核心模块.html#删除目录与文件"><i class="fa fa-check"></i><b>45.2.7</b> 删除目录与文件</a></li>
</ul></li>
</ul></li>
<li class="chapter" data-level="46" data-path="buffer.html"><a href="buffer.html"><i class="fa fa-check"></i><b>46</b> buffer</a><ul>
<li class="chapter" data-level="46.1" data-path="buffer.html"><a href="buffer.html#常用属性和方法"><i class="fa fa-check"></i><b>46.1</b> 常用属性和方法</a><ul>
<li class="chapter" data-level="46.1.1" data-path="buffer.html"><a href="buffer.html#buffer.fromstring-encoding"><i class="fa fa-check"></i><b>46.1.1</b> Buffer.from(string [, encoding])</a></li>
<li class="chapter" data-level="46.1.2" data-path="buffer.html"><a href="buffer.html#buf.tostringencoding-start-end"><i class="fa fa-check"></i><b>46.1.2</b> buf.toString([encoding[, start[, end]]])</a></li>
<li class="chapter" data-level="46.1.3" data-path="buffer.html"><a href="buffer.html#buf.length"><i class="fa fa-check"></i><b>46.1.3</b> buf.length</a></li>
</ul></li>
<li class="chapter" data-level="46.2" data-path="buffer.html"><a href="buffer.html#stream"><i class="fa fa-check"></i><b>46.2</b> stream</a><ul>
<li class="chapter" data-level="46.2.1" data-path="buffer.html"><a href="buffer.html#为什么要使用流"><i class="fa fa-check"></i><b>46.2.1</b> 为什么要使用流</a></li>
<li class="chapter" data-level="46.2.2" data-path="buffer.html"><a href="buffer.html#node.js-中的流类别"><i class="fa fa-check"></i><b>46.2.2</b> Node.js 中的流类别</a></li>
<li class="chapter" data-level="46.2.3" data-path="buffer.html"><a href="buffer.html#读取文件流"><i class="fa fa-check"></i><b>46.2.3</b> 读取文件流</a></li>
<li class="chapter" data-level="46.2.4" data-path="buffer.html"><a href="buffer.html#可读流的事件"><i class="fa fa-check"></i><b>46.2.4</b> 可读流的事件</a></li>
<li class="chapter" data-level="46.2.5" data-path="buffer.html"><a href="buffer.html#写入流信息"><i class="fa fa-check"></i><b>46.2.5</b> 写入流信息</a></li>
<li class="chapter" data-level="46.2.6" data-path="buffer.html"><a href="buffer.html#管道-pipe"><i class="fa fa-check"></i><b>46.2.6</b> 管道 pipe</a></li>
</ul></li>
<li class="chapter" data-level="46.3" data-path="buffer.html"><a href="buffer.html#htpp-模块"><i class="fa fa-check"></i><b>46.3</b> HTPP 模块</a><ul>
<li class="chapter" data-level="46.3.1" data-path="buffer.html"><a href="buffer.html#http.serverresponse-类"><i class="fa fa-check"></i><b>46.3.1</b> http.ServerResponse 类</a></li>
<li class="chapter" data-level="46.3.2" data-path="buffer.html"><a href="buffer.html#创建服务器"><i class="fa fa-check"></i><b>46.3.2</b> 创建服务器</a></li>
</ul></li>
<li class="chapter" data-level="46.4" data-path="buffer.html"><a href="buffer.html#扩展阅读资料-13"><i class="fa fa-check"></i><b>46.4</b> 扩展阅读资料</a></li>
</ul></li>
<li class="chapter" data-level="47" data-path="fs-模块.html"><a href="fs-模块.html"><i class="fa fa-check"></i><b>47</b> fs 模块</a><ul>
<li class="chapter" data-level="47.1" data-path="fs-模块.html"><a href="fs-模块.html#回调函数-1"><i class="fa fa-check"></i><b>47.1</b> 回调函数</a></li>
<li class="chapter" data-level="47.2" data-path="fs-模块.html"><a href="fs-模块.html#同步与异步的区别"><i class="fa fa-check"></i><b>47.2</b> 同步与异步的区别</a></li>
<li class="chapter" data-level="47.3" data-path="fs-模块.html"><a href="fs-模块.html#使用fs模块读取文件"><i class="fa fa-check"></i><b>47.3</b> 使用fs模块读取文件</a></li>
<li class="chapter" data-level="47.4" data-path="fs-模块.html"><a href="fs-模块.html#promise对象"><i class="fa fa-check"></i><b>47.4</b> promise对象</a></li>
</ul></li>
<li class="part"><span><b>VII Vue</b></span></li>
<li class="chapter" data-level="48" data-path="vue-简介.html"><a href="vue-简介.html"><i class="fa fa-check"></i><b>48</b> Vue 简介</a><ul>
<li class="chapter" data-level="48.1" data-path="vue-简介.html"><a href="vue-简介.html#vue.js-是什么"><i class="fa fa-check"></i><b>48.1</b> Vue.js 是什么</a></li>
<li class="chapter" data-level="48.2" data-path="vue-简介.html"><a href="vue-简介.html#vue.js-解决了什么问题"><i class="fa fa-check"></i><b>48.2</b> Vue.js 解决了什么问题</a></li>
<li class="chapter" data-level="48.3" data-path="vue-简介.html"><a href="vue-简介.html#vue.js-学习资源"><i class="fa fa-check"></i><b>48.3</b> Vue.js 学习资源</a></li>
<li class="chapter" data-level="48.4" data-path="vue-简介.html"><a href="vue-简介.html#vue.js-实例对象"><i class="fa fa-check"></i><b>48.4</b> Vue.js 实例对象</a></li>
</ul></li>
<li class="chapter" data-level="49" data-path="vue-js-模板.html"><a href="vue-js-模板.html"><i class="fa fa-check"></i><b>49</b> Vue.js 模板</a><ul>
<li class="chapter" data-level="49.1" data-path="vue-js-模板.html"><a href="vue-js-模板.html#元素文本插值"><i class="fa fa-check"></i><b>49.1</b> 元素文本插值</a></li>
<li class="chapter" data-level="49.2" data-path="vue-js-模板.html"><a href="vue-js-模板.html#元素属性值"><i class="fa fa-check"></i><b>49.2</b> 元素属性值</a></li>
<li class="chapter" data-level="49.3" data-path="vue-js-模板.html"><a href="vue-js-模板.html#指令"><i class="fa fa-check"></i><b>49.3</b> 指令</a><ul>
<li class="chapter" data-level="49.3.1" data-path="vue-js-模板.html"><a href="vue-js-模板.html#v-text"><i class="fa fa-check"></i><b>49.3.1</b> v-text</a></li>
<li class="chapter" data-level="49.3.2" data-path="vue-js-模板.html"><a href="vue-js-模板.html#v-html"><i class="fa fa-check"></i><b>49.3.2</b> v-html</a></li>
<li class="chapter" data-level="49.3.3" data-path="vue-js-模板.html"><a href="vue-js-模板.html#v-show"><i class="fa fa-check"></i><b>49.3.3</b> v-show</a></li>
<li class="chapter" data-level="49.3.4" data-path="vue-js-模板.html"><a href="vue-js-模板.html#v-if"><i class="fa fa-check"></i><b>49.3.4</b> v-if</a></li>
<li class="chapter" data-level="49.3.5" data-path="vue-js-模板.html"><a href="vue-js-模板.html#v-else"><i class="fa fa-check"></i><b>49.3.5</b> v-else</a></li>
<li class="chapter" data-level="49.3.6" data-path="vue-js-模板.html"><a href="vue-js-模板.html#v-else-if"><i class="fa fa-check"></i><b>49.3.6</b> v-else-if</a></li>
<li class="chapter" data-level="49.3.7" data-path="vue-js-模板.html"><a href="vue-js-模板.html#v-for"><i class="fa fa-check"></i><b>49.3.7</b> v-for</a></li>
<li class="chapter" data-level="49.3.8" data-path="vue-js-模板.html"><a href="vue-js-模板.html#v-on"><i class="fa fa-check"></i><b>49.3.8</b> v-on</a></li>
<li class="chapter" data-level="49.3.9" data-path="vue-js-模板.html"><a href="vue-js-模板.html#v-bind"><i class="fa fa-check"></i><b>49.3.9</b> v-bind</a></li>
<li class="chapter" data-level="49.3.10" data-path="vue-js-模板.html"><a href="vue-js-模板.html#v-model"><i class="fa fa-check"></i><b>49.3.10</b> v-model</a></li>
<li class="chapter" data-level="49.3.11" data-path="vue-js-模板.html"><a href="vue-js-模板.html#v-pre"><i class="fa fa-check"></i><b>49.3.11</b> v-pre</a></li>
<li class="chapter" data-level="49.3.12" data-path="vue-js-模板.html"><a href="vue-js-模板.html#v-cloak"><i class="fa fa-check"></i><b>49.3.12</b> v-cloak</a></li>
<li class="chapter" data-level="49.3.13" data-path="vue-js-模板.html"><a href="vue-js-模板.html#v-once"><i class="fa fa-check"></i><b>49.3.13</b> v-once</a></li>
</ul></li>
</ul></li>
<li class="chapter" data-level="50" data-path="vue-js-组件.html"><a href="vue-js-组件.html"><i class="fa fa-check"></i><b>50</b> Vue.js 组件</a><ul>
<li class="chapter" data-level="50.1" data-path="vue-js-组件.html"><a href="vue-js-组件.html#全局组件的声明"><i class="fa fa-check"></i><b>50.1</b> 全局组件的声明</a></li>
<li class="chapter" data-level="50.2" data-path="vue-js-组件.html"><a href="vue-js-组件.html#全局组件的使用"><i class="fa fa-check"></i><b>50.2</b> 全局组件的使用</a></li>
<li class="chapter" data-level="50.3" data-path="vue-js-组件.html"><a href="vue-js-组件.html#局部组件的定义及使用"><i class="fa fa-check"></i><b>50.3</b> 局部组件的定义及使用</a></li>
</ul></li>
<li class="part"><span><b>VIII Jquery</b></span></li>
<li class="chapter" data-level="51" data-path="jquery-简介.html"><a href="jquery-简介.html"><i class="fa fa-check"></i><b>51</b> jQuery 简介</a><ul>
<li class="chapter" data-level="51.1" data-path="jquery-简介.html"><a href="jquery-简介.html#jquery-基础概念"><i class="fa fa-check"></i><b>51.1</b> jQuery 基础概念</a><ul>
<li class="chapter" data-level="51.1.1" data-path="jquery-简介.html"><a href="jquery-简介.html#jquery-中的"><i class="fa fa-check"></i><b>51.1.1</b> jQuery 中的“$”</a></li>
<li class="chapter" data-level="51.1.2" data-path="jquery-简介.html"><a href="jquery-简介.html#document-.ready"><i class="fa fa-check"></i><b>51.1.2</b> <code>$( document ).ready()</code></a></li>
<li class="chapter" data-level="51.1.3" data-path="jquery-简介.html"><a href="jquery-简介.html#jquery-选择符"><i class="fa fa-check"></i><b>51.1.3</b> jQuery 选择符</a></li>
</ul></li>
<li class="chapter" data-level="51.2" data-path="jquery-简介.html"><a href="jquery-简介.html#jquery的扩展选择符"><i class="fa fa-check"></i><b>51.2</b> jQuery的扩展选择符</a></li>
<li class="chapter" data-level="51.3" data-path="jquery-简介.html"><a href="jquery-简介.html#jquery事件处理"><i class="fa fa-check"></i><b>51.3</b> jQuery事件处理</a><ul>
<li class="chapter" data-level="51.3.1" data-path="jquery-简介.html"><a href="jquery-简介.html#处理简单事件"><i class="fa fa-check"></i><b>51.3.1</b> 处理简单事件</a></li>
<li class="chapter" data-level="51.3.2" data-path="jquery-简介.html"><a href="jquery-简介.html#事件对象-1"><i class="fa fa-check"></i><b>51.3.2</b> 事件对象</a></li>
<li class="chapter" data-level="51.3.3" data-path="jquery-简介.html"><a href="jquery-简介.html#jquery-与-css"><i class="fa fa-check"></i><b>51.3.3</b> jQuery 与 CSS</a></li>
<li class="chapter" data-level="51.3.4" data-path="jquery-简介.html"><a href="jquery-简介.html#jquery特效"><i class="fa fa-check"></i><b>51.3.4</b> jQuery特效</a></li>
</ul></li>
</ul></li>
<li class="chapter" data-level="52" data-path="jquery应用案例.html"><a href="jquery应用案例.html"><i class="fa fa-check"></i><b>52</b> jQuery应用案例</a><ul>
<li class="chapter" data-level="52.1" data-path="jquery应用案例.html"><a href="jquery应用案例.html#返回顶部"><i class="fa fa-check"></i><b>52.1</b> 返回顶部</a><ul>
<li class="chapter" data-level="52.1.1" data-path="jquery应用案例.html"><a href="jquery应用案例.html#原理"><i class="fa fa-check"></i><b>52.1.1</b> 原理</a></li>
<li class="chapter" data-level="52.1.2" data-path="jquery应用案例.html"><a href="jquery应用案例.html#代码"><i class="fa fa-check"></i><b>52.1.2</b> 代码</a></li>
<li class="chapter" data-level="52.1.3" data-path="jquery应用案例.html"><a href="jquery应用案例.html#分析"><i class="fa fa-check"></i><b>52.1.3</b> 分析</a></li>
</ul></li>
<li class="chapter" data-level="52.2" data-path="jquery应用案例.html"><a href="jquery应用案例.html#图片轮播"><i class="fa fa-check"></i><b>52.2</b> 图片轮播</a><ul>
<li class="chapter" data-level="52.2.1" data-path="jquery应用案例.html"><a href="jquery应用案例.html#原理-1"><i class="fa fa-check"></i><b>52.2.1</b> 原理</a></li>
<li class="chapter" data-level="52.2.2" data-path="jquery应用案例.html"><a href="jquery应用案例.html#代码-1"><i class="fa fa-check"></i><b>52.2.2</b> 代码</a></li>
<li class="chapter" data-level="52.2.3" data-path="jquery应用案例.html"><a href="jquery应用案例.html#分析-1"><i class="fa fa-check"></i><b>52.2.3</b> 分析</a></li>
</ul></li>
<li class="chapter" data-level="52.3" data-path="jquery应用案例.html"><a href="jquery应用案例.html#全选按钮"><i class="fa fa-check"></i><b>52.3</b> 全选按钮</a><ul>
<li class="chapter" data-level="52.3.1" data-path="jquery应用案例.html"><a href="jquery应用案例.html#原理-2"><i class="fa fa-check"></i><b>52.3.1</b> 原理</a></li>
<li class="chapter" data-level="52.3.2" data-path="jquery应用案例.html"><a href="jquery应用案例.html#代码-2"><i class="fa fa-check"></i><b>52.3.2</b> 代码</a></li>
<li class="chapter" data-level="52.3.3" data-path="jquery应用案例.html"><a href="jquery应用案例.html#分析-2"><i class="fa fa-check"></i><b>52.3.3</b> 分析</a></li>
</ul></li>
</ul></li>
<li class="divider"></li>
<li><a href="https://bookdown.org" target="blank">本书由 bookdown 强力驱动</a></li>

</ul>

      </nav>
    </div>

    <div class="book-body">
      <div class="body-inner">
        <div class="book-header" role="navigation">
          <h1>
            <i class="fa fa-circle-o-notch fa-spin"></i><a href="./">前端开发2020版</a>
          </h1>
        </div>

        <div class="page-wrapper" tabindex="-1" role="main">
          <div class="page-inner">

            <section class="normal" id="section-">
<div id="javascript-变量类型" class="section level1">
<h1><span class="header-section-number">第 33 章</span> JavaScript 变量类型</h1>
<p>JavaScript 是一种弱类型或者说动态语言。这意味着你不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。这也意味着你可以使用同一个变量保存不同类型的数据.</p>
<p>最新的 ECMAScript 标准定义了 7 种数据类型:<code>Boolean</code>、<code>Null</code>、<code>Undefined</code>、<code>Number</code>、<code>String</code>、<code>Symbol</code><a href="#fn2" class="footnote-ref" id="fnref2"><sup>2</sup></a> 和<code>Object</code>。</p>
<div id="boolean布尔型" class="section level2">
<h2><span class="header-section-number">33.1</span> Boolean布尔型</h2>
<p>布尔型数据的取值只有两个：<code>true</code>和<code>false</code>。布尔型数据不能用引号括起来，否则就变成字符串了。</p>
<div class="sourceCode" id="cb251"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span id="cb251-1"><a href="javascript-变量类型.html#cb251-1"></a><span class="kw">var</span> a <span class="op">=</span> <span class="kw">false</span><span class="op">;</span> <span class="co">//boolean类型</span></span>
<span id="cb251-2"><a href="javascript-变量类型.html#cb251-2"></a><span class="kw">var</span> b <span class="op">=</span> <span class="st">&#39;false&#39;</span><span class="op">;</span> <span class="co">//字符串类型</span></span></code></pre></div>
<p>可以调用转型函数<code>Boolean()</code>,将其他值转换为布尔值。其中<code>''</code>、<code>0</code>、<code>NaN</code>、<code>null</code>、<code>undefined</code>会被转化为<code>false</code>，其他情况下都会被转化为<code>true</code>。</p>
</div>
<div id="null空类型" class="section level2">
<h2><span class="header-section-number">33.2</span> Null空类型</h2>
<p>Null 是一个 JavaScript 字面量，表示空值（null or an “empty” value），即没有对象被呈现（no object value is present）。只有一个值，就是<code>null</code>。</p>
<p>如果定义一个意在保存对象的变量，最好在初始化的时候，将其初始化为<code>null</code>，而不是其他类型的值。</p>
</div>
<div id="undefined未定义类型" class="section level2">
<h2><span class="header-section-number">33.3</span> Undefined未定义类型</h2>
<p><code>Undefined</code> 类型派生自 <code>Null</code>。按照 ECMA-262 的规定，应该让这两个值相等。</p>
<div class="sourceCode" id="cb252"><pre class="sourceCode js"><code class="sourceCode javascript"><span id="cb252-1"><a href="javascript-变量类型.html#cb252-1"></a><span class="op">&gt;</span> <span class="kw">undefined</span> <span class="op">==</span> <span class="kw">null</span></span>
<span id="cb252-2"><a href="javascript-变量类型.html#cb252-2"></a><span class="op">&lt;</span> <span class="kw">true</span></span></code></pre></div>
<p>一个未初始化的变量的值为<code>undefined</code>,使用严格相等运算符(===)来判断一个值是否是<code>undefined</code>:</p>
<div class="sourceCode" id="cb253"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span id="cb253-1"><a href="javascript-变量类型.html#cb253-1"></a><span class="kw">var</span> x<span class="op">;</span></span>
<span id="cb253-2"><a href="javascript-变量类型.html#cb253-2"></a><span class="at">alert</span>(<span class="kw">typeof</span> x)<span class="op">;</span></span></code></pre></div>
<p>对未初始化和未声明的变量执行 <code>typeof</code> 操作符，都会返回<code>undefined</code>值。</p>
</div>
<div id="number数值型" class="section level2">
<h2><span class="header-section-number">33.4</span> Number数值型</h2>
<p>在 Javascript 中，数值型数据不区分整数和小数，数值型和字符型数据的区别是数值型数据不用引号括起来。例如：</p>
<div class="sourceCode" id="cb254"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span id="cb254-1"><a href="javascript-变量类型.html#cb254-1"></a><span class="kw">var</span> num1 <span class="op">=</span> <span class="dv">54</span><span class="op">;</span></span>
<span id="cb254-2"><a href="javascript-变量类型.html#cb254-2"></a><span class="kw">var</span> num2 <span class="op">=</span> <span class="fl">5.4</span><span class="op">;</span></span>
<span id="cb254-3"><a href="javascript-变量类型.html#cb254-3"></a><span class="kw">var</span> num2 <span class="op">=</span> <span class="fl">5.0</span><span class="op">;</span>  <span class="co">// 会被转化为整数。</span></span></code></pre></div>
<div id="浮点数值" class="section level3">
<h3><span class="header-section-number">33.4.1</span> 浮点数值</h3>
<p>由于保存浮点数需要的内存空间是保存整数值的两倍，因此JavaScript会及时将浮点数值转化为整数。如上例中<code>5.0</code>会按照<code>5</code>来保存。另外JavaScript中的浮点数运算精确度远不如整数，如:</p>
<div class="sourceCode" id="cb255"><pre class="sourceCode js"><code class="sourceCode javascript"><span id="cb255-1"><a href="javascript-变量类型.html#cb255-1"></a><span class="op">&gt;</span> <span class="fl">0.1</span> <span class="op">+</span> <span class="fl">0.2</span> <span class="op">==</span> <span class="fl">0.3</span></span>
<span id="cb255-2"><a href="javascript-变量类型.html#cb255-2"></a><span class="op">&lt;</span> <span class="kw">false</span></span></code></pre></div>
<p>在计算机中，数字无论是定点数还是浮点数都是以多位二进制的方式进行存储的。而对于像<code>0.1</code>这样的数值用二进制表示你就会发现无法整除，最后算下来会是 <code>0.000110011...</code>由于存储空间有限，最后计算机会舍弃后面的数值，所以我们最后就只能得到一个近似值。在<code>0.1 + 0.2</code>这个式子中，<code>0.1</code>和<code>0.2</code>都是近似表示的，在他们相加的时候，两个近似值进行了计算，导致最后得到的值是<code>0.30000000000000004</code>，此时对于JS来说，其不够近似于<code>0.3</code>，于是就出现了<code>0.1 + 0.2 != 0.3</code> 这个现象。为了进行类似的运算的准确性，可使用整数进行：</p>
<div class="sourceCode" id="cb256"><pre class="sourceCode js"><code class="sourceCode javascript"><span id="cb256-1"><a href="javascript-变量类型.html#cb256-1"></a><span class="op">&gt;</span> (<span class="dv">1</span><span class="op">+</span><span class="dv">2</span>)<span class="op">/</span><span class="dv">10</span> <span class="op">==</span><span class="fl">0.3</span></span>
<span id="cb256-2"><a href="javascript-变量类型.html#cb256-2"></a><span class="op">&lt;</span> <span class="kw">true</span></span></code></pre></div>
</div>
<div id="数值范围" class="section level3">
<h3><span class="header-section-number">33.4.2</span> 数值范围</h3>
<p>可使用<code>Number.MIN_VALUE</code>获取可表示的最小值，使用<code>Number.MAX_VALUE</code>获取可表示的最大值，可以使用<code>isFinite()</code>函数判断数值范围是否在这两个数之间。</p>
</div>
<div id="nan" class="section level3">
<h3><span class="header-section-number">33.4.3</span> NaN</h3>
<p><code>NaN</code>，即不是数值，用来表示一个本来要返回数值的操作，却未能返回数值的情况（这样不会抛出错误了，代码会继续运行）。<code>NaN</code> 本身有两个特点：任何涉及<code>NaN</code>的操作，都返回<code>NaN</code>；<code>NaN</code>与任何数都不相等，包括它自己。</p>
<div class="sourceCode" id="cb257"><pre class="sourceCode js"><code class="sourceCode javascript"><span id="cb257-1"><a href="javascript-变量类型.html#cb257-1"></a><span class="op">&gt;</span> <span class="kw">NaN</span> <span class="op">+</span> <span class="dv">3</span></span>
<span id="cb257-2"><a href="javascript-变量类型.html#cb257-2"></a><span class="op">&lt;</span> <span class="kw">NaN</span></span>
<span id="cb257-3"><a href="javascript-变量类型.html#cb257-3"></a><span class="op">&gt;</span> <span class="kw">NaN</span> <span class="op">===</span> <span class="kw">NaN</span></span>
<span id="cb257-4"><a href="javascript-变量类型.html#cb257-4"></a><span class="op">&lt;</span> <span class="kw">false</span></span></code></pre></div>
<p>可用<code>isNaN()</code>函数判断一个值是否为<code>NaN</code>。</p>
</div>
<div id="转化类型" class="section level3">
<h3><span class="header-section-number">33.4.4</span> 转化类型</h3>
<p>Number 类型内置了一些方法，其中<code>toString()</code> 方法返回指定 Number 对象的字符串表示形式。</p>
<div class="sourceCode" id="cb258"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span id="cb258-1"><a href="javascript-变量类型.html#cb258-1"></a><span class="kw">var</span> count <span class="op">=</span> <span class="dv">10</span><span class="op">;</span></span>
<span id="cb258-2"><a href="javascript-变量类型.html#cb258-2"></a></span>
<span id="cb258-3"><a href="javascript-变量类型.html#cb258-3"></a><span class="at">print</span>( <span class="va">count</span>.<span class="at">toString</span>() )<span class="op">;</span>   <span class="co">// 输出 &quot;10&quot;</span></span>
<span id="cb258-4"><a href="javascript-变量类型.html#cb258-4"></a><span class="at">print</span>( (<span class="dv">17</span>).<span class="at">toString</span>() )<span class="op">;</span>    <span class="co">// 输出 &quot;17&quot;</span></span>
<span id="cb258-5"><a href="javascript-变量类型.html#cb258-5"></a></span>
<span id="cb258-6"><a href="javascript-变量类型.html#cb258-6"></a><span class="kw">var</span> x <span class="op">=</span> <span class="dv">6</span><span class="op">;</span></span>
<span id="cb258-7"><a href="javascript-变量类型.html#cb258-7"></a></span>
<span id="cb258-8"><a href="javascript-变量类型.html#cb258-8"></a><span class="at">print</span>( <span class="va">x</span>.<span class="at">toString</span>(<span class="dv">2</span>) )<span class="op">;</span>      <span class="co">// 输出 &quot;110&quot;</span></span>
<span id="cb258-9"><a href="javascript-变量类型.html#cb258-9"></a><span class="at">print</span>( (<span class="dv">254</span>).<span class="at">toString</span>(<span class="dv">16</span>) )<span class="op">;</span> <span class="co">// 输出 &quot;fe&quot;</span></span>
<span id="cb258-10"><a href="javascript-变量类型.html#cb258-10"></a></span>
<span id="cb258-11"><a href="javascript-变量类型.html#cb258-11"></a><span class="at">print</span>( (<span class="op">-</span><span class="dv">10</span>).<span class="at">toString</span>(<span class="dv">2</span>) )<span class="op">;</span> <span class="co">// 输出 &quot;-1010&quot;</span></span>
<span id="cb258-12"><a href="javascript-变量类型.html#cb258-12"></a><span class="at">print</span>( (<span class="op">-</span><span class="bn">0xff</span>).<span class="at">toString</span>() )<span class="op">;</span> <span class="co">// 输出 &quot;-11111111&quot;</span></span></code></pre></div>
<p>有三个函数可以将其他值转化为数字。</p>
<ol style="list-style-type: decimal">
<li><code>Number()</code>可将任何数据类型转化为数值；</li>
<li><code>parseInt()</code>可将字符串转化为整数；</li>
<li><code>parseFloat()</code>可将字符串转化为浮点数；</li>
</ol>
</div>
</div>
<div id="string-字符串" class="section level2">
<h2><span class="header-section-number">33.5</span> String 字符串</h2>
<p>字符串由多个字符构成，字符可以是字母、数字、标点符号或空格。字符串必须放在单引号或者双引号中。例如：</p>
<div class="sourceCode" id="cb259"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span id="cb259-1"><a href="javascript-变量类型.html#cb259-1"></a><span class="kw">var</span> txt1 <span class="op">=</span> <span class="st">&quot;JavaScript&quot;</span><span class="op">;</span></span></code></pre></div>
<p>字面量<code>\unnnn</code>用十六进制表示一个Unicode字符。</p>
<div id="转换为字符串" class="section level3">
<h3><span class="header-section-number">33.5.1</span> 转换为字符串</h3>
<ol style="list-style-type: decimal">
<li>使用<code>toString()</code>方法，但<code>null</code>和<code>undefined</code>值没有这个方法。</li>
<li><code>String()</code>函数，可将任何值转化为字符串。</li>
</ol>
</div>
</div>
<div id="symbol-符号类型" class="section level2">
<h2><span class="header-section-number">33.6</span> Symbol 符号类型</h2>
<p>符号类型在 ECMAScript 第 6 版中被引入 Javascript。 符号类型是唯一的并且是不可修改的。</p>
</div>
<div id="object-对象类型" class="section level2">
<h2><span class="header-section-number">33.7</span> Object 对象类型</h2>
<p>在Javascript里，对象是非常重要的一种数据类型，对象可以被看作是由一些彼此相关的属性和方法集合在一起构成的数据实体，本质上是由一组无序的键值对组成。JavaScript中内置了一些对象，如array（数组）、date（日期）等等。</p>
<div id="数组" class="section level3">
<h3><span class="header-section-number">33.7.1</span> 数组</h3>
<p>字符串、数值型和布尔型变量在任意时刻只能存储一个值。如果要用一个变量存储多个值，就需要使用数组。数组是由名称相同的多个值构成的一个集合，集合中的值是数组的元素（element）。例如可以将一个班级的所有成员姓名存储在数组中。</p>
<p>在Javascript中，使用array关键字来定义数组，在定义中，可以声明数组的大小，也可以不声明数组中元素的个数。例如：</p>
<div class="sourceCode" id="cb260"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span id="cb260-1"><a href="javascript-变量类型.html#cb260-1"></a><span class="kw">var</span> country <span class="op">=</span> <span class="kw">new</span> <span class="at">array</span>(<span class="dv">180</span>)<span class="op">;</span>   <span class="co">//定义了数组的大小</span></span>
<span id="cb260-2"><a href="javascript-变量类型.html#cb260-2"></a><span class="kw">var</span> mybooks <span class="op">=</span> <span class="kw">new</span> <span class="at">array</span>()<span class="op">;</span>      <span class="co">//没有定义数组的大小</span></span>
<span id="cb260-3"><a href="javascript-变量类型.html#cb260-3"></a>mybooks[<span class="dv">0</span>] <span class="op">=</span> “HTML”<span class="op">;</span>          <span class="co">//为数组mybooks的第一个元素赋值</span></span>
<span id="cb260-4"><a href="javascript-变量类型.html#cb260-4"></a>mybooks[<span class="dv">1</span>] <span class="op">=</span> “JavaScript”<span class="op">;</span>    <span class="co">//为数组mybooks的第二个元素赋值</span></span></code></pre></div>
<p>数组中元素的索引默认从0开始，上例中的“mybooks[0]”表示数组中的第一个元素。</p>
<p>除了使用array关键字定义数组外，还可以直接使用方括号定义数组，数组中的元素要用逗号隔开，最后一个元素后没有逗号。如：</p>
<div class="sourceCode" id="cb261"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span id="cb261-1"><a href="javascript-变量类型.html#cb261-1"></a><span class="kw">var</span> site <span class="op">=</span> [”腾讯”<span class="op">,</span>”新浪”<span class="op">,</span>”搜狐”<span class="op">,</span>”网易”]<span class="op">;</span></span></code></pre></div>
</div>
</div>
<div id="查看变量类型" class="section level2">
<h2><span class="header-section-number">33.8</span> 查看变量类型</h2>
<p>在JavaScript中，typeof操作符能返回一个字符串,表示未经求值的操作数(unevaluated operand)的类型。</p>
<div class="sourceCode" id="cb262"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span id="cb262-1"><a href="javascript-变量类型.html#cb262-1"></a><span class="kw">var</span> a <span class="op">=</span> <span class="dv">1</span><span class="op">;</span></span>
<span id="cb262-2"><a href="javascript-变量类型.html#cb262-2"></a><span class="at">alert</span>(<span class="kw">typeof</span> a)<span class="op">;</span></span></code></pre></div>
</div>
<div id="变量类型的转换" class="section level2">
<h2><span class="header-section-number">33.9</span> 变量类型的转换</h2>
<p>JavaScript 是一种弱类型或者说动态语言。开发者不用提前声明变量的类型，在程序运行过程中，类型会被自动确定，这也意味着我们可以使用同一个变量保存不同类型的数据：</p>
<div class="sourceCode" id="cb263"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span id="cb263-1"><a href="javascript-变量类型.html#cb263-1"></a><span class="kw">var</span> foo <span class="op">=</span> <span class="dv">42</span><span class="op">;</span>    <span class="co">// foo is a Number now</span></span>
<span id="cb263-2"><a href="javascript-变量类型.html#cb263-2"></a><span class="kw">var</span> foo <span class="op">=</span> <span class="st">&quot;bar&quot;</span><span class="op">;</span> <span class="co">// foo is a String now</span></span>
<span id="cb263-3"><a href="javascript-变量类型.html#cb263-3"></a><span class="kw">var</span> foo <span class="op">=</span> <span class="kw">true</span><span class="op">;</span>  <span class="co">// foo is a Boolean now</span></span></code></pre></div>
<p>除了让程序自动确定类型外，有时，我们也可以使用以下函数强制转换数据类型：</p>
<ol style="list-style-type: decimal">
<li><strong>Number()</strong> 强制内容转为数字；</li>
<li><strong>Boolean()</strong> 强制内容转为布尔值；</li>
<li><strong>String()</strong> 强制内容转为字符串；</li>
</ol>
<p>如：</p>
<div class="sourceCode" id="cb264"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span id="cb264-1"><a href="javascript-变量类型.html#cb264-1"></a>var　t1　<span class="op">=</span><span class="at">　Boolean</span>(<span class="st">&quot;&quot;</span>)<span class="op">;</span>       <span class="co">//返回false,空字符串</span></span>
<span id="cb264-2"><a href="javascript-变量类型.html#cb264-2"></a>var　t2　<span class="op">=</span><span class="at">　Boolean</span>(<span class="st">&quot;s&quot;</span>)<span class="op">;</span>  <span class="co">//返回true，非空字符串</span></span></code></pre></div>
</div>
<div id="javascript-object" class="section level2">
<h2><span class="header-section-number">33.10</span> JavaScript Object</h2>
<p>对象是一个包含相关数据和方法的集合（通常由一些变量和函数组成，我们称之为对象里面的属性和方法）。Javascript 中对象(object)的概念可以比照着现实生活中实实在在的物体来理解。</p>
<p>在JavaScript中，一个对象可以是一个单独的拥有属性和类型的实体。我们拿它和一个杯子做下类比。一个杯子是一个对象(物体)，拥有属性。杯子有颜色，图案，重量，由什么材质构成等等。同样，javascript对象也有属性来定义它的特征。</p>
<p>一个对象就是一系列属性的集合，一个属性包含一个名字和一个值。一个属性的值可以是函数，这种情况下属性也被称为方法。</p>
<p>在 JavaScript 中，几乎所有的东西都是对象。所有的原生类型除了 null 与 undefined 之外都被当作对象。它们可以被赋予属性，并且它们都有对象的全部特征。</p>
<div id="对象的创建" class="section level3">
<h3><span class="header-section-number">33.10.1</span> 对象的创建</h3>
<p>JavaScript 拥有一系列预定义的对象。另外，我们可以通过对象初始化器（Object Initializer）创建自己的对象。或者通过创建一个构造函数并使用该函数和 new 操作符初始化对象。</p>
<p>通过对象初始化器创建对象的方法如下：</p>
<div class="sourceCode" id="cb265"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span id="cb265-1"><a href="javascript-变量类型.html#cb265-1"></a><span class="kw">var</span> obj <span class="op">=</span> <span class="op">{</span> <span class="dt">property_1</span><span class="op">:</span>   value_1<span class="op">,</span>   <span class="co">// property_# may be an identifier...</span></span>
<span id="cb265-2"><a href="javascript-变量类型.html#cb265-2"></a>            <span class="dt">property_2</span><span class="op">:</span>   value_2<span class="op">,</span>   <span class="co">// or a number...</span></span>
<span id="cb265-3"><a href="javascript-变量类型.html#cb265-3"></a>            <span class="co">// ...,</span></span>
<span id="cb265-4"><a href="javascript-变量类型.html#cb265-4"></a>            <span class="st">&quot;property n&quot;</span><span class="op">:</span> value_n <span class="op">};</span> <span class="co">// or a string</span></span></code></pre></div>
<p>这里 obj 是新对象实例的名称，每一个 <code>property_i</code> 是一个标识符（可以是一个名称、数字或字符串字面量），并且每个 <code>value_i</code> 是一个其值将被赋予 <code>property_i</code> 的表达式。属性的集合用<code>{}</code>标记，通过点符号来访问一个对象的属性。对象有时也被叫作关联数组, 因为每个属性都有一个用于访问它的字符串值。如：</p>
<div class="sourceCode" id="cb266"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span id="cb266-1"><a href="javascript-变量类型.html#cb266-1"></a>obj[<span class="st">&#39;property_1&#39;</span>] <span class="op">=</span> value1<span class="op">;</span></span>
<span id="cb266-2"><a href="javascript-变量类型.html#cb266-2"></a>obj[<span class="dv">0</span>] <span class="op">=</span> value1<span class="op">;</span></span></code></pre></div>
<p>但显然，用方括号访问对象属性的方式不如使用点符号的方式简洁。</p>
<p>通过<code>new</code>运算符创建对象的示例如下：</p>
<div class="sourceCode" id="cb267"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span id="cb267-1"><a href="javascript-变量类型.html#cb267-1"></a><span class="kw">var</span> author <span class="op">=</span> <span class="kw">new</span> <span class="at">Object</span>()<span class="op">;</span></span>
<span id="cb267-2"><a href="javascript-变量类型.html#cb267-2"></a><span class="va">author</span>.<span class="at">words</span> <span class="op">=</span> <span class="st">&#39;绿叶恋爱时便成了花&#39;</span><span class="op">;</span></span>
<span id="cb267-3"><a href="javascript-变量类型.html#cb267-3"></a><span class="va">console</span>.<span class="at">log</span>(<span class="va">author</span>.<span class="at">words</span>)<span class="op">;</span></span></code></pre></div>
<p><code>new</code>运算符的作用是创建一个对象实例。单纯的使用<code>new</code>运算符创建对象实例的方式不够灵活，尤其是要创建对象的多个实例时，需要逐一完成对象属性的赋值工作。因此，常通过构造函数和<code>new</code>运算符的结合创造对象，这种对象创造方法能在创造对象的同时完成对象属性的赋值。</p>
<p>构造函数，是一种特殊的方法。主要用来在创建对象时初始化对象， 即为对象成员变量赋初始值，与<code>new</code>运算符一起使用在创建对象的语句中。</p>
<p>通过构造函数和<code>new</code>运算符创建对象的例子：</p>
<div class="sourceCode" id="cb268"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span id="cb268-1"><a href="javascript-变量类型.html#cb268-1"></a><span class="kw">function</span> <span class="at">student</span>(sName<span class="op">,</span> sex<span class="op">,</span> major) <span class="op">{</span></span>
<span id="cb268-2"><a href="javascript-变量类型.html#cb268-2"></a>        <span class="kw">this</span>.<span class="at">sName</span> <span class="op">=</span> sName<span class="op">;</span></span>
<span id="cb268-3"><a href="javascript-变量类型.html#cb268-3"></a>        <span class="kw">this</span>.<span class="at">sex</span>   <span class="op">=</span> sex<span class="op">;</span></span>
<span id="cb268-4"><a href="javascript-变量类型.html#cb268-4"></a>        <span class="kw">this</span>.<span class="at">major</span> <span class="op">=</span> major<span class="op">;</span></span>
<span id="cb268-5"><a href="javascript-变量类型.html#cb268-5"></a>    <span class="op">}</span></span>
<span id="cb268-6"><a href="javascript-变量类型.html#cb268-6"></a><span class="kw">var</span> student1 <span class="op">=</span> <span class="kw">new</span> <span class="at">student</span>(<span class="st">&#39;小明&#39;</span><span class="op">,</span> <span class="st">&#39;男&#39;</span><span class="op">,</span><span class="st">&#39;新媒体&#39;</span>)<span class="op">;</span></span></code></pre></div>
<p>其中的<code>this</code>关键字指代对象本身。</p>
</div>
</div>
<div id="更改删除对象中的属性" class="section level2">
<h2><span class="header-section-number">33.11</span> 更改、删除对象中的属性</h2>
<p>更新对象中的属性值与单独设置对象属性值的方法是一样的。</p>
<div class="sourceCode" id="cb269"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span id="cb269-1"><a href="javascript-变量类型.html#cb269-1"></a><span class="kw">var</span> <span class="va">student1</span>.<span class="at">major</span> <span class="op">=</span> <span class="st">&#39;数字出版&#39;</span><span class="op">;</span></span></code></pre></div>
<p>使用delete命令可以删除对象中的属性：</p>
<div class="sourceCode" id="cb270"><pre class="sourceCode js"><code class="sourceCode javascript"><span id="cb270-1"><a href="javascript-变量类型.html#cb270-1"></a><span class="kw">delete</span> <span class="va">student1</span>.<span class="at">major</span></span></code></pre></div>
</div>
<div id="为对象增加方法" class="section level2">
<h2><span class="header-section-number">33.12</span> 为对象增加方法</h2>
<p>在对象中定义方法，和为对象添加属性类似，只不过赋值为函数即可。</p>
<div class="sourceCode" id="cb271"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span id="cb271-1"><a href="javascript-变量类型.html#cb271-1"></a><span class="kw">function</span> <span class="at">student</span>(sName<span class="op">,</span> sex<span class="op">,</span> major) <span class="op">{</span></span>
<span id="cb271-2"><a href="javascript-变量类型.html#cb271-2"></a>        <span class="kw">this</span>.<span class="at">sName</span> <span class="op">=</span> sName<span class="op">;</span></span>
<span id="cb271-3"><a href="javascript-变量类型.html#cb271-3"></a>        <span class="kw">this</span>.<span class="at">sex</span>   <span class="op">=</span> sex<span class="op">;</span></span>
<span id="cb271-4"><a href="javascript-变量类型.html#cb271-4"></a>        <span class="kw">this</span>.<span class="at">major</span> <span class="op">=</span> major<span class="op">;</span></span>
<span id="cb271-5"><a href="javascript-变量类型.html#cb271-5"></a>    <span class="op">}</span></span>
<span id="cb271-6"><a href="javascript-变量类型.html#cb271-6"></a><span class="kw">var</span> student1 <span class="op">=</span> <span class="kw">new</span> <span class="at">student</span>(<span class="st">&#39;小明&#39;</span><span class="op">,</span> <span class="st">&#39;男&#39;</span><span class="op">,</span><span class="st">&#39;新媒体&#39;</span>)<span class="op">;</span></span>
<span id="cb271-7"><a href="javascript-变量类型.html#cb271-7"></a><span class="va">student1</span>.<span class="at">sayHello</span> <span class="op">=</span> <span class="kw">function</span>(<span class="st">&#39;message&#39;</span>) <span class="op">{</span></span>
<span id="cb271-8"><a href="javascript-变量类型.html#cb271-8"></a>    <span class="va">console</span>.<span class="at">log</span>(message)<span class="op">;</span></span>
<span id="cb271-9"><a href="javascript-变量类型.html#cb271-9"></a><span class="op">}</span></span>
<span id="cb271-10"><a href="javascript-变量类型.html#cb271-10"></a><span class="va">student1</span>.<span class="at">sayHello</span>()<span class="op">;</span></span></code></pre></div>
</div>
<div id="循环输出对象的属性" class="section level2">
<h2><span class="header-section-number">33.13</span> 循环输出对象的属性</h2>
<p>在有些情况下，开发人员并不了解对象的内部属性，这时可以使用<code>for…in</code>语句枚举对象的所有属性。如下例所示：</p>
<div class="sourceCode" id="cb272"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span id="cb272-1"><a href="javascript-变量类型.html#cb272-1"></a><span class="cf">for</span>(<span class="kw">var</span> i <span class="kw">in</span> student1) <span class="op">{</span></span>
<span id="cb272-2"><a href="javascript-变量类型.html#cb272-2"></a>  <span class="va">console</span>.<span class="at">log</span>(i <span class="op">+</span> <span class="st">&quot;=&quot;</span> <span class="op">+</span> student1[i])<span class="op">;</span></span>
<span id="cb272-3"><a href="javascript-变量类型.html#cb272-3"></a><span class="op">}</span></span></code></pre></div>
</div>
<div id="javascript-函数" class="section level2">
<h2><span class="header-section-number">33.14</span> JavaScript 函数</h2>
<p>在 JavaScript中，函数是头等(first-class)对象，因为它们可以像任何其他对象一样具有属性和方法。它们与其他对象的区别在于函数可以被调用。简而言之，它们是Function对象。</p>
<div id="function对象" class="section level3">
<h3><span class="header-section-number">33.14.1</span> function对象</h3>
<table>
<thead>
<tr class="header">
<th>属性及方法名称</th>
<th>意义</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td>Function.caller</td>
<td>获取调用函数的具体对象。</td>
</tr>
<tr class="even">
<td>Function.length</td>
<td>获取函数的接收参数个数。</td>
</tr>
<tr class="odd">
<td>Function.name</td>
<td>获取函数的名称。</td>
</tr>
<tr class="even">
<td>Function.displayName</td>
<td>获取函数的display name。</td>
</tr>
<tr class="odd">
<td>Function.prototype.constructor</td>
<td>声明函数的原型构造方法</td>
</tr>
<tr class="even">
<td>Function.prototype.apply()</td>
<td>在一个对象的上下文中应用另一个对象的方法；参数能够以数组形式传入。</td>
</tr>
<tr class="odd">
<td>Function.prototype.bind()</td>
<td>bind()方法会创建一个新函数,称为绑定函数</td>
</tr>
<tr class="even">
<td>Function.prototype.call()</td>
<td>在一个对象的上下文中应用另一个对象的方法。</td>
</tr>
<tr class="odd">
<td>Function.prototype.isGenerator()</td>
<td>若函数对象为generator，返回true，反之返回 false。</td>
</tr>
<tr class="even">
<td>Function.prototype.toSource()</td>
<td>获取函数的实现源码的字符串。</td>
</tr>
<tr class="odd">
<td>Function.prototype.toString()</td>
<td>获取函数的实现源码的字符串。</td>
</tr>
</tbody>
</table>
</div>
<div id="函数的定义" class="section level3">
<h3><span class="header-section-number">33.14.2</span> 函数的定义</h3>
<p>函数可以通过多种方式进行定义：</p>
<div id="函数声明" class="section level4">
<h4><span class="header-section-number">33.14.2.1</span> 函数声明</h4>
<div class="sourceCode" id="cb273"><pre class="sourceCode js"><code class="sourceCode javascript"><span id="cb273-1"><a href="javascript-变量类型.html#cb273-1"></a><span class="kw">function</span> <span class="at">name</span>([param[<span class="op">,</span> param[<span class="op">,</span> ... <span class="at">param</span>]]]) <span class="op">{</span> statements <span class="op">}</span></span></code></pre></div>
</div>
<div id="函数表达式" class="section level4">
<h4><span class="header-section-number">33.14.2.2</span> 函数表达式</h4>
<div class="sourceCode" id="cb274"><pre class="sourceCode js"><code class="sourceCode javascript"><span id="cb274-1"><a href="javascript-变量类型.html#cb274-1"></a><span class="kw">let</span> function_expression <span class="op">=</span> <span class="kw">function</span> [name]([param1[<span class="op">,</span> param2[<span class="op">,</span> ...<span class="op">,</span> paramN]]]) <span class="op">{</span></span>
<span id="cb274-2"><a href="javascript-变量类型.html#cb274-2"></a>   statements</span>
<span id="cb274-3"><a href="javascript-变量类型.html#cb274-3"></a><span class="op">};</span></span></code></pre></div>
</div>
<div id="函数生成器声明" class="section level4">
<h4><span class="header-section-number">33.14.2.3</span> 函数生成器声明</h4>
<div class="sourceCode" id="cb275"><pre class="sourceCode js"><code class="sourceCode javascript"><span id="cb275-1"><a href="javascript-变量类型.html#cb275-1"></a><span class="kw">function</span><span class="op">*</span> <span class="at">name</span>([param[<span class="op">,</span> param[<span class="op">,</span> ... <span class="at">param</span>]]]) <span class="op">{</span> statements <span class="op">}</span></span></code></pre></div>
</div>
<div id="函数生成器表达式" class="section level4">
<h4><span class="header-section-number">33.14.2.4</span> 函数生成器表达式</h4>
<div class="sourceCode" id="cb276"><pre class="sourceCode js"><code class="sourceCode javascript"><span id="cb276-1"><a href="javascript-变量类型.html#cb276-1"></a><span class="kw">let</span> function_expression <span class="op">=</span> <span class="kw">function</span><span class="op">*</span> [name]([param1[<span class="op">,</span> param2[<span class="op">,</span> ...<span class="op">,</span> paramN]]]) <span class="op">{</span></span>
<span id="cb276-2"><a href="javascript-变量类型.html#cb276-2"></a>   statements</span>
<span id="cb276-3"><a href="javascript-变量类型.html#cb276-3"></a><span class="op">};</span></span></code></pre></div>
</div>
<div id="箭头函数表达式" class="section level4">
<h4><span class="header-section-number">33.14.2.5</span> 箭头函数表达式</h4>
<p>箭头函数是简写形式的函数表达式，箭头函数总是匿名的。</p>
<div class="sourceCode" id="cb277"><pre class="sourceCode js"><code class="sourceCode javascript"><span id="cb277-1"><a href="javascript-变量类型.html#cb277-1"></a>(param1<span class="op">,</span> param2<span class="op">,</span> …<span class="op">,</span> paramN) <span class="kw">=&gt;</span> <span class="op">{</span> statements <span class="op">}</span></span>
<span id="cb277-2"><a href="javascript-变量类型.html#cb277-2"></a>(param1<span class="op">,</span> param2<span class="op">,</span> …<span class="op">,</span> paramN) <span class="kw">=&gt;</span> expression</span>
<span id="cb277-3"><a href="javascript-变量类型.html#cb277-3"></a>         <span class="co">// 相当于  =&gt; { return expression; }</span></span>
<span id="cb277-4"><a href="javascript-变量类型.html#cb277-4"></a></span>
<span id="cb277-5"><a href="javascript-变量类型.html#cb277-5"></a><span class="co">// 如果只有一个参数，圆括号是可选的:</span></span>
<span id="cb277-6"><a href="javascript-变量类型.html#cb277-6"></a>(singleParam) <span class="kw">=&gt;</span> <span class="op">{</span> statements <span class="op">}</span></span>
<span id="cb277-7"><a href="javascript-变量类型.html#cb277-7"></a>singleParam <span class="kw">=&gt;</span> <span class="op">{</span> statements <span class="op">}</span></span>
<span id="cb277-8"><a href="javascript-变量类型.html#cb277-8"></a></span>
<span id="cb277-9"><a href="javascript-变量类型.html#cb277-9"></a><span class="co">// 无参数的函数需要使用圆括号:</span></span>
<span id="cb277-10"><a href="javascript-变量类型.html#cb277-10"></a>() <span class="kw">=&gt;</span> <span class="op">{</span> statements <span class="op">}</span></span></code></pre></div>
<p>箭头函数的设计目的，就是简写，如上面语法中的参数，如果只有一个，则可以去掉包含参数的圆括号；函数体中的表达式，如果只有一行，则可以去掉花括弧。</p>
<p>箭头函数的引入有两个方面的影响：一是更简短的函数书写，二是对 this 的词法解析。</p>
<div id="更简洁的函数书写" class="section level5">
<h5><span class="header-section-number">33.14.2.5.1</span> 更简洁的函数书写</h5>
<div class="sourceCode" id="cb278"><pre class="sourceCode js"><code class="sourceCode javascript"><span id="cb278-1"><a href="javascript-变量类型.html#cb278-1"></a><span class="kw">var</span> a <span class="op">=</span> [</span>
<span id="cb278-2"><a href="javascript-变量类型.html#cb278-2"></a>  <span class="st">&quot;hello&quot;</span><span class="op">,</span></span>
<span id="cb278-3"><a href="javascript-变量类型.html#cb278-3"></a>  <span class="st">&quot;JavaScript&quot;</span><span class="op">,</span></span>
<span id="cb278-4"><a href="javascript-变量类型.html#cb278-4"></a>  <span class="st">&quot;arrow&quot;</span><span class="op">,</span></span>
<span id="cb278-5"><a href="javascript-变量类型.html#cb278-5"></a>  <span class="st">&quot;function&quot;</span></span>
<span id="cb278-6"><a href="javascript-变量类型.html#cb278-6"></a>]<span class="op">;</span></span>
<span id="cb278-7"><a href="javascript-变量类型.html#cb278-7"></a></span>
<span id="cb278-8"><a href="javascript-变量类型.html#cb278-8"></a><span class="kw">var</span> a2 <span class="op">=</span> <span class="va">a</span>.<span class="at">map</span>(<span class="kw">function</span>(s)<span class="op">{</span> <span class="cf">return</span> <span class="va">s</span>.<span class="at">length</span> <span class="op">}</span>)<span class="op">;</span></span>
<span id="cb278-9"><a href="javascript-变量类型.html#cb278-9"></a></span>
<span id="cb278-10"><a href="javascript-变量类型.html#cb278-10"></a><span class="kw">var</span> a3 <span class="op">=</span> <span class="va">a</span>.<span class="at">map</span>( s <span class="kw">=&gt;</span> <span class="va">s</span>.<span class="at">length</span> )<span class="op">;</span></span></code></pre></div>
<p>比较一下，显然使用箭头函数，使得匿名函数的定义更为简洁，少了function、圆括号、花括号和return关键字。</p>
</div>
<div id="箭头函数不绑定this" class="section level5">
<h5><span class="header-section-number">33.14.2.5.2</span> 箭头函数不绑定this</h5>
<p>在箭头函数出现之前，每个新定义的函数都有其自己的this值，这个规定在有些情景下回带来不便。</p>
<p>在 ECMAScript 3/5 中，这个问题可以通过新增一个变量来指向期望的 this 对象，然后将该变量放到闭包中来解决。</p>
<div class="sourceCode" id="cb279"><pre class="sourceCode js"><code class="sourceCode javascript"><span id="cb279-1"><a href="javascript-变量类型.html#cb279-1"></a><span class="kw">function</span> <span class="at">Person</span>() <span class="op">{</span></span>
<span id="cb279-2"><a href="javascript-变量类型.html#cb279-2"></a>  <span class="kw">var</span> self <span class="op">=</span> <span class="kw">this</span><span class="op">;</span> <span class="co">// 新增一个变量来指向期望的 this 对象</span></span>
<span id="cb279-3"><a href="javascript-变量类型.html#cb279-3"></a>  <span class="va">self</span>.<span class="at">age</span> <span class="op">=</span> <span class="dv">0</span><span class="op">;</span></span>
<span id="cb279-4"><a href="javascript-变量类型.html#cb279-4"></a></span>
<span id="cb279-5"><a href="javascript-变量类型.html#cb279-5"></a>  <span class="at">setInterval</span>(<span class="kw">function</span> <span class="at">growUp</span>() <span class="op">{</span></span>
<span id="cb279-6"><a href="javascript-变量类型.html#cb279-6"></a>    <span class="co">// 回调里面的 `self` 变量就指向了期望的那个对象了</span></span>
<span id="cb279-7"><a href="javascript-变量类型.html#cb279-7"></a>    <span class="va">self</span>.<span class="at">age</span><span class="op">++;</span></span>
<span id="cb279-8"><a href="javascript-变量类型.html#cb279-8"></a>  <span class="op">},</span> <span class="dv">1000</span>)<span class="op">;</span>   <span class="co">//然后将该变量放到闭包中来解决。</span></span>
<span id="cb279-9"><a href="javascript-变量类型.html#cb279-9"></a><span class="op">}</span></span></code></pre></div>
<p>而箭头函数则会捕获其所在上下文的 this 值，作为自己的 this 值，因此下面的代码将如期运行：</p>
<div class="sourceCode" id="cb280"><pre class="sourceCode js"><code class="sourceCode javascript"><span id="cb280-1"><a href="javascript-变量类型.html#cb280-1"></a><span class="kw">function</span> <span class="at">Person</span>()<span class="op">{</span></span>
<span id="cb280-2"><a href="javascript-变量类型.html#cb280-2"></a>  <span class="kw">this</span>.<span class="at">age</span> <span class="op">=</span> <span class="dv">0</span><span class="op">;</span></span>
<span id="cb280-3"><a href="javascript-变量类型.html#cb280-3"></a></span>
<span id="cb280-4"><a href="javascript-变量类型.html#cb280-4"></a>  <span class="at">setInterval</span>(() <span class="kw">=&gt;</span> <span class="op">{</span></span>
<span id="cb280-5"><a href="javascript-变量类型.html#cb280-5"></a>    <span class="kw">this</span>.<span class="at">age</span><span class="op">++;</span> <span class="co">// |this| 正确地指向了 person 对象</span></span>
<span id="cb280-6"><a href="javascript-变量类型.html#cb280-6"></a>  <span class="op">},</span> <span class="dv">1000</span>)<span class="op">;</span></span>
<span id="cb280-7"><a href="javascript-变量类型.html#cb280-7"></a><span class="op">}</span></span>
<span id="cb280-8"><a href="javascript-变量类型.html#cb280-8"></a></span>
<span id="cb280-9"><a href="javascript-变量类型.html#cb280-9"></a><span class="kw">var</span> p <span class="op">=</span> <span class="kw">new</span> <span class="at">Person</span>()<span class="op">;</span></span></code></pre></div>
<p>使用箭头函数，一方面简化了代码书写，最关键是，箭头函数能判断出上下文的this值，而不是在匿名函数中自己创建this值。</p>
</div>
</div>
</div>
<div id="函数参数" class="section level3">
<h3><span class="header-section-number">33.14.3</span> 函数参数</h3>
<div id="实参与形参" class="section level4">
<h4><span class="header-section-number">33.14.3.1</span> 实参与形参</h4>
<p>调用函数时，传递给函数的值被称为函数的实参（值传递），对应位置的函数参数名叫作形参。如果实参是一个包含原始值(数字，字符串，布尔值)的变量，则就算函数在内部改变了对应形参的值，返回后，该实参变量的值也不会改变。如果实参是一个对象引用，则对应形参会和该实参指向同一个对象。</p>
</div>
<div id="参数默认值" class="section level4">
<h4><span class="header-section-number">33.14.3.2</span> 参数默认值</h4>
<p>JavaScript 中函数的参数默认是undefined。然而，在某些情况下可能需要设置一个不同的默认值。</p>
<div class="sourceCode" id="cb281"><pre class="sourceCode js"><code class="sourceCode javascript"><span id="cb281-1"><a href="javascript-变量类型.html#cb281-1"></a><span class="kw">function</span> <span class="at">multiply</span>(a<span class="op">,</span> b <span class="op">=</span> <span class="dv">1</span>) <span class="op">{</span></span>
<span id="cb281-2"><a href="javascript-变量类型.html#cb281-2"></a>  <span class="cf">return</span> a <span class="op">*</span> b<span class="op">;</span></span>
<span id="cb281-3"><a href="javascript-变量类型.html#cb281-3"></a><span class="op">}</span></span>
<span id="cb281-4"><a href="javascript-变量类型.html#cb281-4"></a></span>
<span id="cb281-5"><a href="javascript-变量类型.html#cb281-5"></a><span class="at">multiply</span>(<span class="dv">5</span><span class="op">,</span> <span class="dv">2</span>)<span class="op">;</span> <span class="co">// 10</span></span>
<span id="cb281-6"><a href="javascript-变量类型.html#cb281-6"></a><span class="at">multiply</span>(<span class="dv">5</span><span class="op">,</span> <span class="dv">1</span>)<span class="op">;</span> <span class="co">// 5</span></span>
<span id="cb281-7"><a href="javascript-变量类型.html#cb281-7"></a><span class="at">multiply</span>(<span class="dv">5</span>)<span class="op">;</span>    <span class="co">// 5</span></span></code></pre></div>
</div>
<div id="不定数量参数" class="section level4">
<h4><span class="header-section-number">33.14.3.3</span> 不定数量参数</h4>
<div class="sourceCode" id="cb282"><pre class="sourceCode js"><code class="sourceCode javascript"><span id="cb282-1"><a href="javascript-变量类型.html#cb282-1"></a><span class="kw">function</span>(a<span class="op">,</span> b<span class="op">,</span> ...<span class="at">theArgs</span>) <span class="op">{</span></span>
<span id="cb282-2"><a href="javascript-变量类型.html#cb282-2"></a>  <span class="co">// ...</span></span>
<span id="cb282-3"><a href="javascript-变量类型.html#cb282-3"></a><span class="op">}</span></span></code></pre></div>
<p>theArgs将收集的参数和所有后续参数，从而实现不定量多个参数的接收。</p>
</div>
</div>
<div id="变量作用域" class="section level3">
<h3><span class="header-section-number">33.14.4</span> 变量作用域</h3>
<p>在函数内部定义的变量，无法在函数外直接调用。而在函数外部定义的变量，可以在函数内部使用。</p>
<div class="sourceCode" id="cb283"><pre class="sourceCode js"><code class="sourceCode javascript"><span id="cb283-1"><a href="javascript-变量类型.html#cb283-1"></a><span class="kw">var</span> message <span class="op">=</span> <span class="st">&#39;hello&#39;</span><span class="op">;</span></span>
<span id="cb283-2"><a href="javascript-变量类型.html#cb283-2"></a><span class="kw">var</span> alertMessage <span class="op">=</span> <span class="kw">function</span>() <span class="op">{</span></span>
<span id="cb283-3"><a href="javascript-变量类型.html#cb283-3"></a>    <span class="at">alert</span>(message)<span class="op">;</span></span>
<span id="cb283-4"><a href="javascript-变量类型.html#cb283-4"></a>    <span class="kw">var</span> message_1 <span class="op">=</span> <span class="st">&#39;您好&#39;</span><span class="op">;</span></span>
<span id="cb283-5"><a href="javascript-变量类型.html#cb283-5"></a><span class="op">}</span></span>
<span id="cb283-6"><a href="javascript-变量类型.html#cb283-6"></a><span class="at">alertMessage</span>()<span class="op">;</span></span>
<span id="cb283-7"><a href="javascript-变量类型.html#cb283-7"></a><span class="at">alert</span>(message_1)<span class="op">;</span></span></code></pre></div>
<p>上述代码会出现<code>ReferenceError: message_1 is not defined</code>的错误信息。</p>
</div>
</div>
<div id="javascrip-数组" class="section level2">
<h2><span class="header-section-number">33.15</span> JavaScrip 数组</h2>
<p>数组是一种类列表对象，它的原型中提供了遍历和修改元素的相关操作。JavaScript 数组的长度和元素类型都是非固定的。因为数组的长度可随时改变，并且其数据在内存中也可以不连续，所以 JavaScript 数组不一定是密集型的，这取决于它的使用方式。一般来说，数组的这些特性会给使用带来方便。</p>
<p>数组继承自<code>Function</code>和<code>Object</code>。</p>
<div id="创建数组" class="section level3">
<h3><span class="header-section-number">33.15.1</span> 创建数组</h3>
<p>创建数组的方式有以下几种：</p>
<div class="sourceCode" id="cb284"><pre class="sourceCode js"><code class="sourceCode javascript"><span id="cb284-1"><a href="javascript-变量类型.html#cb284-1"></a>[element0<span class="op">,</span> element1<span class="op">,</span> ...<span class="op">,</span> elementN]</span>
<span id="cb284-2"><a href="javascript-变量类型.html#cb284-2"></a><span class="kw">new</span> <span class="at">Array</span>(element0<span class="op">,</span> element1[<span class="op">,</span> ...[<span class="op">,</span> elementN]])</span>
<span id="cb284-3"><a href="javascript-变量类型.html#cb284-3"></a><span class="kw">new</span> <span class="at">Array</span>(arrayLength)</span></code></pre></div>
<p>例如：</p>
<div class="sourceCode" id="cb285"><pre class="sourceCode js"><code class="sourceCode javascript"><span id="cb285-1"><a href="javascript-变量类型.html#cb285-1"></a><span class="kw">let</span> a <span class="op">=</span> [<span class="dv">1</span><span class="op">,</span> <span class="dv">2</span><span class="op">,</span> <span class="dv">3</span><span class="op">,</span> <span class="dv">4</span>]</span>
<span id="cb285-2"><a href="javascript-变量类型.html#cb285-2"></a><span class="kw">let</span> b <span class="op">=</span> <span class="kw">new</span> <span class="at">Array</span>(<span class="dv">5</span><span class="op">,</span> <span class="dv">6</span><span class="op">,</span> <span class="dv">7</span><span class="op">,</span> <span class="dv">8</span>)</span>
<span id="cb285-3"><a href="javascript-变量类型.html#cb285-3"></a><span class="kw">let</span> c <span class="op">=</span> <span class="kw">new</span> <span class="at">Array</span>(<span class="dv">10</span>)</span></code></pre></div>
<p>JavaScript 中没有关联数组这一数据类型，要使用类似关联数组的数据类型，必须使用对象。</p>
</div>
<div id="访问数组元素" class="section level3">
<h3><span class="header-section-number">33.15.2</span> 访问数组元素</h3>
<p>JavaScript 只能用整数作为数组元素的索引，而不能用字符串(除整数形式的字符串）。例如：</p>
<div class="sourceCode" id="cb286"><pre class="sourceCode js"><code class="sourceCode javascript"><span id="cb286-1"><a href="javascript-变量类型.html#cb286-1"></a><span class="va">console</span>.<span class="at">log</span>(a[<span class="st">&#39;0&#39;</span>])</span>
<span id="cb286-2"><a href="javascript-变量类型.html#cb286-2"></a><span class="va">console</span>.<span class="at">log</span>(a[<span class="dv">0</span>])</span></code></pre></div>
<p>可以将数组的索引用引号引起来，比如 <code>a[2]</code> 可以写成 <code>a['2']</code>。 <code>a[2]</code> 中的 <code>2</code> 会被 JavaScript 解释器通过调用 <code>toString</code> 隐式转换成字符串。</p>
</div>
<div id="常用属性及方法" class="section level3">
<h3><span class="header-section-number">33.15.3</span> 常用属性及方法</h3>
<div id="数组长度length" class="section level4">
<h4><span class="header-section-number">33.15.3.1</span> 数组长度length</h4>
<p>length 是Array的实例属性，返回或设置一个数组中的元素个数。</p>
</div>
<div id="判断是否是array" class="section level4">
<h4><span class="header-section-number">33.15.3.2</span> 判断是否是Array</h4>
<p><code>Array.isArray()</code> 用于确定传递的值是否是一个 Array。</p>
</div>
<div id="数据操作方法" class="section level4">
<h4><span class="header-section-number">33.15.3.3</span> 数据操作方法</h4>
<div id="添加元素到数组的末尾" class="section level5">
<h5><span class="header-section-number">33.15.3.3.1</span> 添加元素到数组的末尾</h5>
<div class="sourceCode" id="cb287"><pre class="sourceCode js"><code class="sourceCode javascript"><span id="cb287-1"><a href="javascript-变量类型.html#cb287-1"></a><span class="kw">var</span> newLength <span class="op">=</span> <span class="va">fruits</span>.<span class="at">push</span>(<span class="st">&#39;Orange&#39;</span>)<span class="op">;</span></span></code></pre></div>
</div>
<div id="删除数组指定元素内容" class="section level5">
<h5><span class="header-section-number">33.15.3.3.2</span> 删除数组指定元素内容</h5>
<div class="sourceCode" id="cb288"><pre class="sourceCode js"><code class="sourceCode javascript"><span id="cb288-1"><a href="javascript-变量类型.html#cb288-1"></a><span class="kw">delete</span> fruits[<span class="dv">2</span>]<span class="op">;</span> <span class="co">// 删除fruits数组中的第3个元素内容</span></span></code></pre></div>
<p>delete删除数组中元素的内容后，元素大小不会改变，该元素的内容为undefined，位置依然保留。</p>
</div>
<div id="删除数组末尾的元素" class="section level5">
<h5><span class="header-section-number">33.15.3.3.3</span> 删除数组末尾的元素</h5>
<div class="sourceCode" id="cb289"><pre class="sourceCode js"><code class="sourceCode javascript"><span id="cb289-1"><a href="javascript-变量类型.html#cb289-1"></a><span class="kw">var</span> last <span class="op">=</span> <span class="va">fruits</span>.<span class="at">pop</span>()<span class="op">;</span> <span class="co">// remove Orange (from the end)</span></span></code></pre></div>
</div>
<div id="删除数组最前面头部的元素" class="section level5">
<h5><span class="header-section-number">33.15.3.3.4</span> 删除数组最前面（头部）的元素</h5>
<div class="sourceCode" id="cb290"><pre class="sourceCode js"><code class="sourceCode javascript"><span id="cb290-1"><a href="javascript-变量类型.html#cb290-1"></a><span class="kw">var</span> first <span class="op">=</span> <span class="va">fruits</span>.<span class="at">shift</span>()<span class="op">;</span> <span class="co">// remove Apple from the front</span></span>
<span id="cb290-2"><a href="javascript-变量类型.html#cb290-2"></a><span class="co">// [&quot;Banana&quot;];</span></span></code></pre></div>
</div>
<div id="添加元素到数组的头部" class="section level5">
<h5><span class="header-section-number">33.15.3.3.5</span> 添加元素到数组的头部</h5>
<div class="sourceCode" id="cb291"><pre class="sourceCode js"><code class="sourceCode javascript"><span id="cb291-1"><a href="javascript-变量类型.html#cb291-1"></a><span class="kw">var</span> newLength <span class="op">=</span> <span class="va">fruits</span>.<span class="at">unshift</span>(<span class="st">&#39;Strawberry&#39;</span>) <span class="co">// add to the front</span></span>
<span id="cb291-2"><a href="javascript-变量类型.html#cb291-2"></a><span class="co">// [&quot;Strawberry&quot;, &quot;Banana&quot;];</span></span></code></pre></div>
</div>
<div id="合并数组" class="section level5">
<h5><span class="header-section-number">33.15.3.3.6</span> 合并数组</h5>
<p>concat方法能将两个数组合并在一起。</p>
<div class="sourceCode" id="cb292"><pre class="sourceCode js"><code class="sourceCode javascript"><span id="cb292-1"><a href="javascript-变量类型.html#cb292-1"></a><span class="kw">var</span> fruits2 <span class="op">=</span> [<span class="st">&#39;苹果&#39;</span><span class="op">,</span><span class="st">&#39;香蕉&#39;</span>]<span class="op">;</span></span>
<span id="cb292-2"><a href="javascript-变量类型.html#cb292-2"></a><span class="kw">var</span> fruits <span class="op">=</span> <span class="va">fruits1</span>.<span class="at">concat</span>(fruits2)<span class="op">;</span> <span class="co">//将数组fruits1和fruits2合并成新数组fruits</span></span></code></pre></div>
</div>
</div>
<div id="迭代方法" class="section level4">
<h4><span class="header-section-number">33.15.3.4</span> 迭代方法</h4>
<p>众多遍历方法中，有很多方法都需要指定一个回调函数作为参数。不要尝试在遍历过程中对原数组进行任何修改。</p>
<div id="foreach" class="section level5">
<h5><span class="header-section-number">33.15.3.4.1</span> forEach()</h5>
<p>为数组中的每个元素执行一次回调函数，不生成新数组，也没有返回值。</p>
<div class="sourceCode" id="cb293"><pre class="sourceCode js"><code class="sourceCode javascript"><span id="cb293-1"><a href="javascript-变量类型.html#cb293-1"></a><span class="kw">var</span> fruits <span class="op">=</span> [<span class="st">&#39;Apple&#39;</span><span class="op">,</span> <span class="st">&#39;Banana&#39;</span>]<span class="op">;</span></span>
<span id="cb293-2"><a href="javascript-变量类型.html#cb293-2"></a></span>
<span id="cb293-3"><a href="javascript-变量类型.html#cb293-3"></a><span class="va">fruits</span>.<span class="at">forEach</span>(<span class="kw">function</span> (item<span class="op">,</span> index<span class="op">,</span> array) <span class="op">{</span></span>
<span id="cb293-4"><a href="javascript-变量类型.html#cb293-4"></a>    <span class="va">console</span>.<span class="at">log</span>(item<span class="op">,</span> index)<span class="op">;</span></span>
<span id="cb293-5"><a href="javascript-变量类型.html#cb293-5"></a><span class="op">}</span>)<span class="op">;</span></span></code></pre></div>
</div>
<div id="map-1" class="section level5">
<h5><span class="header-section-number">33.15.3.4.2</span> map()</h5>
<p>map()方法，将使得数组中的每个元素都用map()方法提供的函数进行处理，最后返回由处理后的各元素构成的新数组。</p>
<div class="sourceCode" id="cb294"><pre class="sourceCode js"><code class="sourceCode javascript"><span id="cb294-1"><a href="javascript-变量类型.html#cb294-1"></a><span class="kw">var</span> numbers <span class="op">=</span> [<span class="dv">1</span><span class="op">,</span> <span class="dv">4</span><span class="op">,</span> <span class="dv">9</span>]<span class="op">;</span></span>
<span id="cb294-2"><a href="javascript-变量类型.html#cb294-2"></a><span class="kw">var</span> doubles <span class="op">=</span> <span class="va">numbers</span>.<span class="at">map</span>(<span class="kw">function</span>(num) <span class="op">{</span></span>
<span id="cb294-3"><a href="javascript-变量类型.html#cb294-3"></a>  <span class="cf">return</span> num <span class="op">*</span> <span class="dv">2</span><span class="op">;</span></span>
<span id="cb294-4"><a href="javascript-变量类型.html#cb294-4"></a><span class="op">}</span>)<span class="op">;</span></span></code></pre></div>
</div>
</div>
</div>
<div id="扩展阅读资料-12" class="section level3">
<h3><span class="header-section-number">33.15.4</span> 扩展阅读资料</h3>
<ol style="list-style-type: decimal">
<li><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object" class="uri">https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object</a></li>
<li><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function" class="uri">https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function</a></li>
<li><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array" class="uri">https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array</a></li>
</ol>

</div>
</div>
</div>
<div class="footnotes">
<hr />
<ol start="2">
<li id="fn2"><p>symbol类型是ECMAScript6新增的数据类型，是一种唯一、不可变的变量。<a href="javascript-变量类型.html#fnref2" class="footnote-back">↩︎</a></p></li>
</ol>
</div>
            </section>

          </div>
        </div>
      </div>
<a href="语句和声明.html" class="navigation navigation-prev " aria-label="Previous page"><i class="fa fa-angle-left"></i></a>
<a href="全局对象.html" class="navigation navigation-next " aria-label="Next page"><i class="fa fa-angle-right"></i></a>
    </div>
  </div>
<script src="libs/gitbook-2.6.7/js/app.min.js"></script>
<script src="libs/gitbook-2.6.7/js/lunr.js"></script>
<script src="libs/gitbook-2.6.7/js/clipboard.min.js"></script>
<script src="libs/gitbook-2.6.7/js/plugin-search.js"></script>
<script src="libs/gitbook-2.6.7/js/plugin-sharing.js"></script>
<script src="libs/gitbook-2.6.7/js/plugin-fontsettings.js"></script>
<script src="libs/gitbook-2.6.7/js/plugin-bookdown.js"></script>
<script src="libs/gitbook-2.6.7/js/jquery.highlight.js"></script>
<script src="libs/gitbook-2.6.7/js/plugin-clipboard.js"></script>
<script>
gitbook.require(["gitbook"], function(gitbook) {
gitbook.start({
"sharing": {
"github": true,
"facebook": false,
"twitter": true,
"linkedin": false,
"weibo": false,
"instapaper": false,
"vk": false,
"all": ["facebook", "twitter", "linkedin", "weibo", "instapaper"]
},
"fontsettings": {
"theme": "white",
"family": "sans",
"size": 2
},
"edit": {
"link": "https://github.com/yangjh-xbmu/front-end/edit/master/0306-js-type.Rmd",
"text": "编辑"
},
"history": {
"link": null,
"text": null
},
"view": {
"link": null,
"text": null
},
"download": ["front-end.pdf", "front-end.epub"],
"toc": {
"collapse": "section"
}
});
});
</script>

<!-- dynamically load mathjax for compatibility with self-contained -->
<script>
  (function () {
    var script = document.createElement("script");
    script.type = "text/javascript";
    var src = "true";
    if (src === "" || src === "true") src = "https://mathjax.rstudio.com/latest/MathJax.js?config=TeX-MML-AM_CHTML";
    if (location.protocol !== "file:")
      if (/^https?:/.test(src))
        src = src.replace(/^https?:/, '');
    script.src = src;
    document.getElementsByTagName("head")[0].appendChild(script);
  })();
</script>
</body>

</html>
